Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Schematic Generation AI</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Side Navigation --> | |
| <nav class="side-nav"> | |
| <div class="nav-header"> | |
| <h2>Generation Mode</h2> | |
| </div> | |
| <div class="nav-items"> | |
| <button class="nav-item active" data-mode="text2img"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 5v14M5 12h14"/> | |
| </svg> | |
| Text to Image | |
| </button> | |
| <button class="nav-item" data-mode="img2img"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/> | |
| <path d="M3 15l6-6 9 9"/> | |
| <path d="M13 9l3-3 5 5"/> | |
| </svg> | |
| Image with Text | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <div class="content-area"> | |
| <h1>Schematic Generation AI</h1> | |
| <!-- Text to Image Interface --> | |
| <section id="text2img" class="interface active"> | |
| <div class="form-group"> | |
| <div class="category-wrapper"> | |
| <select id="category" class="category-select"> | |
| <option value="">Select Engineering Category (Optional)</option> | |
| </select> | |
| <div id="categoryInfo" class="category-info"></div> | |
| </div> | |
| <textarea | |
| id="prompt" | |
| placeholder="Describe the schematic you want to generate..." | |
| rows="4" | |
| ></textarea> | |
| <button id="generate">Generate Schematic</button> | |
| </div> | |
| <div id="results"></div> | |
| </section> | |
| <!-- Image with Text Interface --> | |
| <section id="img2img" class="interface"> | |
| <div class="form-group"> | |
| <div class="file-input-wrapper"> | |
| <input type="file" id="inputImage" accept="image/*"> | |
| <label for="inputImage"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/> | |
| <polyline points="17 8 12 3 7 8"/> | |
| <line x1="12" y1="3" x2="12" y2="15"/> | |
| </svg> | |
| <span>Choose an image or drag & drop here</span> | |
| </label> | |
| </div> | |
| <div class="category-wrapper"> | |
| <select id="imageCategory" class="category-select"> | |
| <option value="">Select Engineering Category (Optional)</option> | |
| </select> | |
| <div id="imageCategoryInfo" class="category-info"></div> | |
| </div> | |
| <textarea | |
| id="imagePrompt" | |
| placeholder="Optional: Describe any modifications or specific requirements..." | |
| rows="3" | |
| ></textarea> | |
| <button id="generateWithImage">Generate Modified Schematic</button> | |
| </div> | |
| <div id="resultsImg"></div> | |
| </section> | |
| </div> | |
| <!-- Results Panel --> | |
| <div id="resultsPanel" class="results-panel"></div> | |
| </main> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |