|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="gradient-bg"></div> |
|
|
<div class="gradient-mesh"></div> |
|
|
|
|
|
<div id="welcomeModal" class="modal-overlay" style="display: none;"> |
|
|
<div class="modal-content"> |
|
|
<div class="modal-inner"> |
|
|
<h2 class="header-gradient animate__animated |
|
|
animate__fadeInDown modal-title"> |
|
|
Hi there! |
|
|
</h2> |
|
|
<div class="animate__animated animate__fadeInUp modal-text"> |
|
|
Welcome to the <b>Image Generation Playground</b>, |
|
|
where imagination transforms into visual creations. |
|
|
<br><br> |
|
|
For your information, <b>image generation</b> and |
|
|
<b>OpenAI Audio TTS</b> is already built-in natively |
|
|
in the primary spaces. |
|
|
<br><br> |
|
|
For more advanced capabilities, please visit the |
|
|
<b><a href='https://umint-openwebui.hf.space' |
|
|
target='_blank' style="color: var(--accent); |
|
|
text-decoration: underline;"> |
|
|
UltimaX Intelligence</a></b> primary spaces. |
|
|
<br><br> |
|
|
Please consider reading the |
|
|
<b><a href='https://huggingface.co/spaces/umint/ai/discussions/37' |
|
|
target='_blank' style="color: var(--accent); |
|
|
text-decoration: underline;"> |
|
|
Terms of Use and Consequences of Violation</a></b> |
|
|
if you wish to proceed to the main Spaces. |
|
|
<br><br> |
|
|
<b>Like this project? Feel free to buy me a |
|
|
<a href='https://ko-fi.com/hadad' target='_blank' |
|
|
style="color: var(--accent); |
|
|
text-decoration: underline;">coffee</a></b>. |
|
|
</div> |
|
|
<button onclick="closeWelcomeModal()" |
|
|
class="btn btn-primary w-full animate__animated |
|
|
animate__fadeInUp animate__delay-1s"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<% if (error) { %> |
|
|
<div id="errorModal" class="modal-overlay"> |
|
|
<div class="modal-content modal-error-content"> |
|
|
<div class="modal-inner"> |
|
|
<h3 class="modal-error-title">Error</h3> |
|
|
<p class="modal-error-text"><%= error %></p> |
|
|
<button onclick="closeErrorModal()" |
|
|
class="btn btn-primary w-full">OK</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<% } %> |
|
|
|
|
|
<header class="header-main"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h1 class="header-gradient animate__animated |
|
|
animate__fadeInDown header-title"> |
|
|
Image Generation Playground |
|
|
</h1> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="container mx-auto px-4 main-content"> |
|
|
|
|
|
<div class="image-output-section |
|
|
<%= images && images.length > 0 ? 'has-images' : '' %> |
|
|
animate__animated animate__fadeIn"> |
|
|
<% if (isGenerating) { %> |
|
|
<div class="loading-container"> |
|
|
<div class="loading-spinner" |
|
|
style="margin: 0 auto 20px;"></div> |
|
|
<p class="loading-text">Generating your image...</p> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" |
|
|
style="width: <%= progress %>%;"></div> |
|
|
</div> |
|
|
<p class="progress-text"> |
|
|
<%= progress.toFixed(0) %>% Complete |
|
|
</p> |
|
|
</div> |
|
|
<% } else if (images && images.length > 0) { %> |
|
|
<div class="image-grid"> |
|
|
<% images.forEach((image, index) => { %> |
|
|
<div class="image-card"> |
|
|
<img src="data:image/png;base64,<%= image.base64 %>" |
|
|
alt="<%= image.prompt %>"> |
|
|
<div class="image-actions"> |
|
|
<a href="data:image/png;base64,<%= image.base64 %>" |
|
|
download="generated-<%= image.id %>.png" |
|
|
class="action-btn"> |
|
|
<svg class="action-icon" viewBox="0 0 24 24" |
|
|
fill="none"> |
|
|
<path d="M12 16L7 11L8.4 9.55L11 |
|
|
12.15V4H13V12.15L15.6 9.55L17 |
|
|
11L12 16Z" |
|
|
fill="currentColor"/> |
|
|
<path d="M4 20C3.45 20 2.98 19.8 2.59 19.41C2.2 |
|
|
19.02 2 18.55 2 18V15H4V18H20V15H22V18C22 |
|
|
18.55 21.8 19.02 21.41 19.41C21.02 19.8 |
|
|
20.55 20 20 20H4Z" |
|
|
fill="currentColor"/> |
|
|
</svg> |
|
|
</a> |
|
|
<button type="button" |
|
|
onclick="deleteImage(<%= index %>)" |
|
|
class="action-btn"> |
|
|
<svg class="action-icon" viewBox="0 0 24 24" |
|
|
fill="none"> |
|
|
<path d="M18.3 5.71C17.91 5.32 17.28 5.32 16.89 |
|
|
5.71L12 10.59L7.11 5.7C6.72 5.31 6.09 |
|
|
5.31 5.7 5.7C5.31 6.09 5.31 6.72 5.7 |
|
|
7.11L10.59 12L5.7 16.89C5.31 17.28 5.31 |
|
|
17.91 5.7 18.3C6.09 18.69 6.72 18.69 |
|
|
7.11 18.3L12 13.41L16.89 18.3C17.28 |
|
|
18.69 17.91 18.69 18.3 18.3C18.69 17.91 |
|
|
18.69 17.28 18.3 16.89L13.41 12L18.3 |
|
|
7.11C18.68 6.73 18.68 6.09 18.3 5.71Z" |
|
|
fill="currentColor"/> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
<div class="image-info"> |
|
|
<p class="image-prompt"><%= image.prompt %></p> |
|
|
<p class="image-meta"> |
|
|
<span class="image-model"> |
|
|
<%= image.model.toUpperCase() %> |
|
|
</span> |
|
|
| <%= image.size %> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<% }); %> |
|
|
</div> |
|
|
<% } else { %> |
|
|
<svg class="placeholder-icon" width="80" height="80" |
|
|
viewBox="0 0 24 24" fill="none"> |
|
|
<path d="M21 3H3C2 3 1 4 1 5V19C1 20 2 21 3 21H21C22 |
|
|
21 23 20 23 19V5C23 4 22 3 21 3ZM21 19H3V5H21V19Z" |
|
|
fill="currentColor"/> |
|
|
<path d="M4.5 16.5L9 12L11.5 14.5L16 10L19.5 13.5" |
|
|
stroke="currentColor" stroke-width="1.5" |
|
|
stroke-linecap="round"/> |
|
|
<circle cx="8" cy="8.5" r="1.5" fill="currentColor"/> |
|
|
</svg> |
|
|
<p class="placeholder-text"> |
|
|
No images generated yet. Start creating amazing visuals! |
|
|
</p> |
|
|
<% } %> |
|
|
</div> |
|
|
|
|
|
<section class="card animate__animated animate__fadeIn |
|
|
animate__delay-1s form-section"> |
|
|
<form method="POST" action="/" id="generateForm"> |
|
|
<input type="hidden" name="action" value="generate" |
|
|
id="formAction"> |
|
|
<input type="hidden" name="sessionId" |
|
|
value="<%= sessionId %>" /> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-6 form-grid"> |
|
|
<div> |
|
|
<label class="form-label">Model</label> |
|
|
<select name="model" id="modelSelect" required |
|
|
class="input-field select-field" |
|
|
<%= isGenerating ? 'disabled' : '' %>> |
|
|
<option value="">Select a model</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="form-label">Size</label> |
|
|
<select name="size" id="sizeSelect" required |
|
|
class="input-field select-field" |
|
|
<%= isGenerating ? 'disabled' : '' %>> |
|
|
<option value="">Select size</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label">Prompt</label> |
|
|
<textarea name="prompt" id="promptInput" required |
|
|
placeholder="Describe the image you want to generate..." |
|
|
class="input-field textarea-field" |
|
|
maxlength="300" |
|
|
<%= isGenerating ? 'disabled' : '' %>></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center gap-4"> |
|
|
<% if (!isGenerating) { %> |
|
|
<button type="submit" id="submitBtn" disabled |
|
|
class="btn btn-primary"> |
|
|
<svg class="button-icon" viewBox="0 0 24 24" |
|
|
fill="none"> |
|
|
<path d="M3 20V4L22 12L3 20ZM5 17L16.85 12L5 7V10.5L11 |
|
|
12L5 13.5V17Z" |
|
|
fill="currentColor"/> |
|
|
</svg> |
|
|
Generate Image |
|
|
</button> |
|
|
<% } else { %> |
|
|
<button type="button" onclick="cancelGeneration()" |
|
|
class="btn btn-danger"> |
|
|
<svg class="button-icon" viewBox="0 0 24 24" |
|
|
fill="none"> |
|
|
<rect x="4" y="4" width="16" height="16" rx="3" |
|
|
fill="currentColor"/> |
|
|
</svg> |
|
|
Stop Generation |
|
|
</button> |
|
|
<% } %> |
|
|
</div> |
|
|
</form> |
|
|
</section> |
|
|
|
|
|
<section class="card animate__animated animate__fadeIn |
|
|
animate__delay-1s examples-section"> |
|
|
<h3 class="examples-title">Example Prompts</h3> |
|
|
<div class="grid lg:grid-cols-3 md:grid-cols-2 gap-4" |
|
|
id="examplesGrid"></div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<script src="/__public__/assets/plugins/loadParameter.js"></script> |
|
|
<script defer src="/__public__/assets/plugins/imageGenerator.js"></script> |
|
|
<script defer src="/__public__/assets/plugins/webLoader.js"></script> |
