public/www/body.ejs

<!-- 
  SPDX-FileCopyrightText: Hadad <[email protected]>
  SPDX-License-Identifier: Apache-2.0
-->

<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>