From 32149a88e19fafedff7e32f56666a9d1ba14e811 Mon Sep 17 00:00:00 2001
From: Daniel <danielkopp@gmail.com>
Date: Sun, 27 Sep 2026 16:40:33 -0500
Subject: [PATCH] Inline CSS into index.html and add nginx config

---
 flux-index.html  | 136 ------------------
 index.html       | 366 +++++++++++++++++++++++++++++++++++++++++++++++
 nginx.Dockerfile |   4 +
 nginx.conf       |   9 ++
 4 files changed, 379 insertions(+), 136 deletions(-)
 delete mode 100644 flux-index.html
 create mode 100644 index.html
 create mode 100644 nginx.Dockerfile
 create mode 100644 nginx.conf

diff --git a/flux-index.html b/flux-index.html
deleted file mode 100644
index 6770976..0000000
--- a/flux-index.html
+++ /dev/null
@@ -1,136 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Flux Image Generator</title>
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <h1>Flux Image Generator</h1>
-  <p class="subtitle">Powered by flux-schnell</p>
-
-  <div class="config">
-    <label for="api-url">API URL:</label>
-    <input id="api-url" value="http://192.168.2.154:5005/v1/images/generations" />
-  </div>
-
-  <div class="config">
-    <label for="size-select">Size:</label>
-    <select id="size-select">
-      <option value="1024x1024">1024x1024 (1:1)</option>
-      <option value="1920x1088">1920x1088 (16:9)</option>
-      <option value="1088x1920">1088x1920 (9:16)</option>
-      <option value="1376x1024">1376x1024 (4:3)</option>
-      <option value="1024x1376">1024x1376 (3:4)</option>
-      <option value="1536x1024">1536x1024 (3:2)</option>
-      <option value="1024x1536">1024x1536 (2:3)</option>
-      <option value="2048x2048">2048x2048 (1:1 XL)</option>
-      <option value="2048x1152">2048x1152 (16:9 XL)</option>
-      <option value="1152x2048">1152x2048 (9:16 XL)</option>
-    </select>
-  </div>
-
-  <div class="input-area">
-    <div class="prompt-wrapper">
-      <input id="prompt" type="text" placeholder="Describe the image you want to create..." autofocus />
-      <button id="clear-btn" class="clear-btn" title="Clear">✕</button>
-    </div>
-    <button id="generate-btn">Generate</button>
-  </div>
-
-  <p class="status" id="status"></p>
-
-  <div class="result-area">
-    <div id="image-container">
-      <img id="result-image" alt="Generated image" />
-      <a id="download-btn" download="flux-image.png">⬇ Download PNG</a>
-    </div>
-  </div>
-
-  <script>
-    const promptInput = document.getElementById('prompt');
-    const clearBtn = document.getElementById('clear-btn');
-    const sizeSelect = document.getElementById('size-select');
-    const generateBtn = document.getElementById('generate-btn');
-    const apiInput = document.getElementById('api-url');
-    const statusEl = document.getElementById('status');
-    const imageContainer = document.getElementById('image-container');
-    const resultImage = document.getElementById('result-image');
-    const downloadBtn = document.getElementById('download-btn');
-
-    function setStatus(msg, isError = false) {
-      statusEl.innerHTML = msg;
-      statusEl.className = 'status' + (isError ? ' error' : '');
-    }
-
-    async function generate() {
-      const prompt = promptInput.value.trim();
-      if (!prompt) {
-        setStatus('Please enter a prompt.', true);
-        return;
-      }
-
-      const apiUrl = apiInput.value.trim();
-      if (!apiUrl) {
-        setStatus('Please enter an API URL.', true);
-        return;
-      }
-
-      generateBtn.disabled = true;
-      generateBtn.textContent = 'Generating...';
-      setStatus('<span class="spinner"></span> Generating image...');
-      imageContainer.classList.remove('visible');
-
-      try {
-        const [width, height] = sizeSelect.value.split('x').map(Number);
-        const response = await fetch(apiUrl, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ prompt, model: 'flux-schnell', width, height })
-        });
-
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-        }
-
-        const data = await response.json();
-        const base64 = data.data?.[0]?.b64_json;
-
-        if (!base64 || base64 === 'null') {
-          throw new Error(data.detail || 'No image data returned.');
-        }
-
-        const blob = await fetch(`data:image/png;base64,${base64}`).then(r => r.blob());
-        const url = URL.createObjectURL(blob);
-
-        resultImage.src = url;
-        downloadBtn.href = url;
-
-        const ts = new Date().toISOString().replace(/[:.]/g, '-');
-        downloadBtn.download = `flux-image-${ts}.png`;
-
-        imageContainer.classList.add('visible');
-        setStatus('');
-      } catch (err) {
-        setStatus(`Error: ${err.message}`, true);
-      } finally {
-        generateBtn.disabled = false;
-        generateBtn.textContent = 'Generate';
-      }
-    }
-
-    generateBtn.addEventListener('click', generate);
-    promptInput.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter') generate();
-    });
-    clearBtn.addEventListener('click', () => {
-      promptInput.value = '';
-      promptInput.focus();
-    });
-    promptInput.addEventListener('focus', () => {
-      promptInput.select();
-    });
-  </script>
-</body>
-</html>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d16fc78
--- /dev/null
+++ b/index.html
@@ -0,0 +1,366 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Flux Image Generator</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #0f0f13;
+      color: #e0e0e0;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 2rem 1rem;
+    }
+
+    h1 {
+      font-size: 1.8rem;
+      font-weight: 600;
+      margin-bottom: 0.3rem;
+      background: linear-gradient(135deg, #a78bfa, #60a5fa);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .subtitle {
+      color: #666;
+      font-size: 0.85rem;
+      margin-bottom: 2rem;
+    }
+
+    .input-area {
+      width: 100%;
+      max-width: 640px;
+      display: flex;
+      gap: 0.5rem;
+      margin-bottom: 2rem;
+    }
+
+    #prompt {
+      flex: 1;
+      padding: 0.85rem 1rem;
+      font-size: 1rem;
+      border: 1px solid #2a2a35;
+      border-radius: 10px;
+      background: #1a1a24;
+      color: #e0e0e0;
+      outline: none;
+      transition: border-color 0.2s;
+    }
+
+    #prompt:focus {
+      border-color: #a78bfa;
+    }
+
+    #prompt::placeholder {
+      color: #555;
+    }
+
+    #generate-btn {
+      padding: 0.85rem 1.5rem;
+      font-size: 1rem;
+      font-weight: 600;
+      border: none;
+      border-radius: 10px;
+      background: linear-gradient(135deg, #7c3aed, #3b82f6);
+      color: white;
+      cursor: pointer;
+      transition: opacity 0.2s, transform 0.1s;
+      white-space: nowrap;
+    }
+
+    #generate-btn:hover:not(:disabled) {
+      opacity: 0.9;
+    }
+
+    #generate-btn:active:not(:disabled) {
+      transform: scale(0.97);
+    }
+
+    #generate-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .result-area {
+      width: 100%;
+      max-width: 640px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1rem;
+    }
+
+    #image-container {
+      display: none;
+      flex-direction: column;
+      align-items: center;
+      gap: 1rem;
+      width: 100%;
+    }
+
+    #image-container.visible {
+      display: flex;
+    }
+
+    #result-image {
+      max-width: 100%;
+      border-radius: 12px;
+      border: 1px solid #2a2a35;
+      background: #1a1a24;
+    }
+
+    #download-btn {
+      padding: 0.7rem 1.4rem;
+      font-size: 0.9rem;
+      font-weight: 600;
+      border: 1px solid #2a2a35;
+      border-radius: 8px;
+      background: #1a1a24;
+      color: #a78bfa;
+      cursor: pointer;
+      transition: background 0.2s;
+      text-decoration: none;
+    }
+
+    #download-btn:hover {
+      background: #22222e;
+    }
+
+    .status {
+      font-size: 0.9rem;
+      color: #888;
+      text-align: center;
+      min-height: 1.4em;
+    }
+
+    .status.error {
+      color: #f87171;
+    }
+
+    .spinner {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      margin-right: 0.5em;
+      vertical-align: -0.15em;
+      border: 2px solid #a78bfa;
+      border-right-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.6s linear infinite;
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    .config {
+      width: 100%;
+      max-width: 640px;
+      margin-bottom: 1.5rem;
+      padding: 0.8rem 1rem;
+      background: #1a1a24;
+      border: 1px solid #2a2a35;
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 0.85rem;
+      color: #888;
+    }
+
+    .config label {
+      white-space: nowrap;
+    }
+
+    .config input {
+      flex: 1;
+      padding: 0.35rem 0.5rem;
+      font-size: 0.85rem;
+      border: 1px solid #2a2a35;
+      border-radius: 6px;
+      background: #0f0f13;
+      color: #e0e0e0;
+      outline: none;
+    }
+
+    .config input:focus,
+    .config select:focus {
+      border-color: #a78bfa;
+    }
+
+    .config select {
+      flex: 1;
+      padding: 0.35rem 0.5rem;
+      font-size: 0.85rem;
+      border: 1px solid #2a2a35;
+      border-radius: 6px;
+      background: #0f0f13;
+      color: #e0e0e0;
+      outline: none;
+      cursor: pointer;
+    }
+
+    .prompt-wrapper {
+      flex: 1;
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    .prompt-wrapper #prompt {
+      padding-right: 2.5rem;
+    }
+
+    .clear-btn {
+      position: absolute;
+      right: 0.6rem;
+      background: none;
+      border: none;
+      color: #555;
+      font-size: 1rem;
+      cursor: pointer;
+      padding: 0.3rem;
+      line-height: 1;
+      transition: color 0.2s;
+      z-index: 1;
+    }
+
+    .clear-btn:hover {
+      color: #a78bfa;
+    }
+  </style>
+</head>
+<body>
+  <h1>Flux Image Generator</h1>
+  <p class="subtitle">Powered by flux-schnell</p>
+
+  <div class="config">
+    <label for="api-url">API URL:</label>
+    <input id="api-url" value="http://192.168.2.154:5005/v1/images/generations" />
+  </div>
+
+  <div class="config">
+    <label for="size-select">Size:</label>
+    <select id="size-select">
+      <option value="1024x1024">1024x1024 (1:1)</option>
+      <option value="1920x1088">1920x1088 (16:9)</option>
+      <option value="1088x1920">1088x1920 (9:16)</option>
+      <option value="1376x1024">1376x1024 (4:3)</option>
+      <option value="1024x1376">1024x1376 (3:4)</option>
+      <option value="1536x1024">1536x1024 (3:2)</option>
+      <option value="1024x1536">1024x1536 (2:3)</option>
+      <option value="2048x2048">2048x2048 (1:1 XL)</option>
+      <option value="2048x1152">2048x1152 (16:9 XL)</option>
+      <option value="1152x2048">1152x2048 (9:16 XL)</option>
+    </select>
+  </div>
+
+  <div class="input-area">
+    <div class="prompt-wrapper">
+      <input id="prompt" type="text" placeholder="Describe the image you want to create..." autofocus />
+      <button id="clear-btn" class="clear-btn" title="Clear">✕</button>
+    </div>
+    <button id="generate-btn">Generate</button>
+  </div>
+
+  <p class="status" id="status"></p>
+
+  <div class="result-area">
+    <div id="image-container">
+      <img id="result-image" alt="Generated image" />
+      <a id="download-btn" download="flux-image.png">⬇ Download PNG</a>
+    </div>
+  </div>
+
+  <script>
+    const promptInput = document.getElementById('prompt');
+    const clearBtn = document.getElementById('clear-btn');
+    const sizeSelect = document.getElementById('size-select');
+    const generateBtn = document.getElementById('generate-btn');
+    const apiInput = document.getElementById('api-url');
+    const statusEl = document.getElementById('status');
+    const imageContainer = document.getElementById('image-container');
+    const resultImage = document.getElementById('result-image');
+    const downloadBtn = document.getElementById('download-btn');
+
+    function setStatus(msg, isError = false) {
+      statusEl.innerHTML = msg;
+      statusEl.className = 'status' + (isError ? ' error' : '');
+    }
+
+    async function generate() {
+      const prompt = promptInput.value.trim();
+      if (!prompt) {
+        setStatus('Please enter a prompt.', true);
+        return;
+      }
+
+      const apiUrl = apiInput.value.trim();
+      if (!apiUrl) {
+        setStatus('Please enter an API URL.', true);
+        return;
+      }
+
+      generateBtn.disabled = true;
+      generateBtn.textContent = 'Generating...';
+      setStatus('<span class="spinner"></span> Generating image...');
+      imageContainer.classList.remove('visible');
+
+      try {
+        const [width, height] = sizeSelect.value.split('x').map(Number);
+        const response = await fetch(apiUrl, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ prompt, model: 'flux-schnell', width, height })
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+
+        const data = await response.json();
+        const base64 = data.data?.[0]?.b64_json;
+
+        if (!base64 || base64 === 'null') {
+          throw new Error(data.detail || 'No image data returned.');
+        }
+
+        const blob = await fetch(`data:image/png;base64,${base64}`).then(r => r.blob());
+        const url = URL.createObjectURL(blob);
+
+        resultImage.src = url;
+        downloadBtn.href = url;
+
+        const ts = new Date().toISOString().replace(/[:.]/g, '-');
+        downloadBtn.download = `flux-image-${ts}.png`;
+
+        imageContainer.classList.add('visible');
+        setStatus('');
+      } catch (err) {
+        setStatus(`Error: ${err.message}`, true);
+      } finally {
+        generateBtn.disabled = false;
+        generateBtn.textContent = 'Generate';
+      }
+    }
+
+    generateBtn.addEventListener('click', generate);
+    promptInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') generate();
+    });
+    clearBtn.addEventListener('click', () => {
+      promptInput.value = '';
+      promptInput.focus();
+    });
+    promptInput.addEventListener('focus', () => {
+      promptInput.select();
+    });
+  </script>
+</body>
+</html>
diff --git a/nginx.Dockerfile b/nginx.Dockerfile
new file mode 100644
index 0000000..4a3a36e
--- /dev/null
+++ b/nginx.Dockerfile
@@ -0,0 +1,4 @@
+FROM nginx:alpine
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY index.html /usr/share/nginx/html/index.html
+COPY styles.css /usr/share/nginx/html/styles.css
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..70aa73e
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,9 @@
+server {
+    listen 80;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ =404;
+    }
+}