Upload folder using huggingface_hub

README.md

@@ -1,10 +1,35 @@
 ---
-title: 10eros Workflow Studio
-emoji: 📚
-colorFrom: red
-colorTo: green
+title: 10Eros Workflow Studio
+emoji: 🎞️
+colorFrom: purple
+colorTo: pink
 sdk: static
+app_file: index.html
+short_description: Compose image-to-video prompts for 10Eros
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 10Eros Workflow Studio
+
+A browser-based companion demo for [TenStrip/LTX2.3-10Eros](https://huggingface.co/TenStrip/LTX2.3-10Eros), an LTX 2.3 image-to-video checkpoint.
+
+Use it to preview an input image, compose a precise motion prompt, and export a compact prompt pack for a compatible ComfyUI workflow. The model itself is not hosted in this Space: the original weights are extremely large and require paid GPU hardware for practical inference.
+
+## How to use
+
+1. Add a starting image (it stays in your browser).
+2. Describe the opening frame, then direct the motion, camera movement, and sound.
+3. Copy the assembled prompt or download a JSON prompt pack.
+4. Use it with a compatible LTX 2.3 / 10Eros ComfyUI workflow.
+
+## Notes
+
+- This model is tagged `not-for-all-audiences`; use it responsibly and in accordance with Hugging Face policies and applicable law.
+- The prompt presets in this demo are non-explicit.
+- No images or prompts are uploaded by this static app.
+
+## Links
+
+- [Original model](https://huggingface.co/TenStrip/LTX2.3-10Eros)
+- [Official workflows](https://huggingface.co/TenStrip/LTX2.3-10Eros_Workflows)
+- [10S Comfy nodes](https://github.com/TenStrip/10S-Comfy-nodes)

app.js

@@ -0,0 +1,37 @@
+const fields = ["scene", "motion", "camera", "duration", "sound"].map((id) => document.getElementById(id));
+const output = document.getElementById("prompt-output");
+const status = document.getElementById("copy-status");
+const imageInput = document.getElementById("image-input");
+const preview = document.getElementById("image-preview");
+const dropCopy = document.getElementById("drop-copy");
+const clearImage = document.getElementById("clear-image");
+
+function values() { return { scene: fields[0].value.trim(), motion: fields[1].value.trim(), camera: fields[2].value, duration: fields[3].value, sound: fields[4].value.trim() }; }
+function buildPrompt() {
+  const v = values();
+  if (!v.scene && !v.motion && !v.sound) return "Start describing your scene to build a prompt.";
+  const parts = [];
+  if (v.scene) parts.push(`Opening frame: ${v.scene}`);
+  if (v.motion) parts.push(`Action sequence: ${v.motion}`);
+  parts.push(`Camera: ${v.camera.toLowerCase()} over approximately ${v.duration}.`);
+  if (v.sound) parts.push(`Audio: ${v.sound}`);
+  parts.push("Natural motion, stable composition, coherent anatomy, cinematic detail. No timestamps. Plain English scene direction.");
+  return parts.join("\n\n");
+}
+function refresh() { output.textContent = buildPrompt(); status.textContent = ""; }
+fields.forEach((field) => field.addEventListener("input", refresh));
+fields.slice(2).forEach((field) => field.addEventListener("change", refresh));
+
+document.querySelectorAll("[data-preset]").forEach((button) => button.addEventListener("click", () => {
+  const presets = {
+    cinematic: ["A close portrait of a traveler in a red coat on a misty coastal path at dawn.", "They turn toward the ocean, take two slow steps forward, and the coat moves naturally in the sea breeze.", "Soft surf and distant gulls."],
+    nature: ["A bright orange monarch butterfly rests on a purple flower in a sunlit meadow.", "The butterfly opens and closes its wings, then lifts off as surrounding wildflowers sway in a light breeze.", "Gentle wind through grass and faint birdsong."],
+    product: ["A handcrafted ceramic cup sits on a pale stone table in warm window light.", "The camera makes a slow orbit as a hand gently rotates the cup, revealing its glaze and texture.", "Quiet room tone and a soft ceramic touch."],
+  };
+  const p = presets[button.dataset.preset];
+  fields[0].value = p[0]; fields[1].value = p[1]; fields[4].value = p[2]; refresh();
+}));
+imageInput.addEventListener("change", () => { const file = imageInput.files[0]; if (!file) return; preview.src = URL.createObjectURL(file); preview.hidden = false; dropCopy.hidden = true; clearImage.hidden = false; });
+clearImage.addEventListener("click", () => { imageInput.value = ""; preview.removeAttribute("src"); preview.hidden = true; dropCopy.hidden = false; clearImage.hidden = true; });
+document.getElementById("copy-prompt").addEventListener("click", async () => { try { await navigator.clipboard.writeText(buildPrompt()); status.textContent = "Prompt copied."; } catch { status.textContent = "Copy unavailable — select the text above."; } });
+document.getElementById("download-pack").addEventListener("click", () => { const pack = { model: "TenStrip/LTX2.3-10Eros", generated_at: new Date().toISOString(), input_image_selected: Boolean(imageInput.files[0]), settings: values(), prompt: buildPrompt() }; const link = document.createElement("a"); link.href = URL.createObjectURL(new Blob([JSON.stringify(pack, null, 2)], { type: "application/json" })); link.download = "10eros-prompt-pack.json"; link.click(); URL.revokeObjectURL(link.href); status.textContent = "Prompt pack downloaded."; });

index.html

@@ -1,19 +1,75 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="A prompt and workflow companion for TenStrip's 10Eros image-to-video model." />
+    <title>10Eros Workflow Studio</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <main>
+      <header class="hero">
+        <p class="eyebrow">LTX 2.3 · IMAGE TO VIDEO</p>
+        <h1>10Eros <span>Workflow Studio</span></h1>
+        <p class="lede">Turn a reference image and a clear direction into a compact, ready-to-use video prompt.</p>
+        <div class="badges"><span>Browser-only</span><span>Private by design</span><span>ComfyUI-ready</span></div>
+      </header>
+
+      <section class="notice" aria-label="About this demo">
+        <strong>Workflow companion, not hosted inference.</strong> 10Eros is a large checkpoint; running it needs compatible GPU hardware. This free Space helps you prepare a high-quality input locally.
+      </section>
+
+      <section class="studio" aria-label="Prompt studio">
+        <div class="panel reference-panel">
+          <div class="panel-heading"><span class="step">01</span><h2>Reference frame</h2></div>
+          <label class="dropzone" for="image-input" id="dropzone">
+            <input id="image-input" type="file" accept="image/*" />
+            <img id="image-preview" alt="Your selected reference frame" hidden />
+            <div id="drop-copy"><span class="upload-mark">↑</span><strong>Add an opening frame</strong><small>PNG, JPG, WEBP · stays on your device</small></div>
+          </label>
+          <button class="text-button" id="clear-image" type="button" hidden>Remove image</button>
+          <p class="hint">Describe what changes from this frame instead of repeating every visible detail.</p>
+        </div>
+
+        <div class="panel compose-panel">
+          <div class="panel-heading"><span class="step">02</span><h2>Direct the scene</h2></div>
+          <div class="presets" aria-label="Prompt starters">
+            <button type="button" data-preset="cinematic">Cinematic portrait</button>
+            <button type="button" data-preset="nature">Nature study</button>
+            <button type="button" data-preset="product">Product reveal</button>
+          </div>
+          <label for="scene">Opening scene <span>what is already in frame?</span></label>
+          <textarea id="scene" rows="3" placeholder="A traveler in a red coat stands on a misty coastal path at dawn."></textarea>
+          <label for="motion">Motion direction <span>be concrete and chronological</span></label>
+          <textarea id="motion" rows="4" placeholder="The traveler turns toward the ocean; the coat moves in the wind as they take two measured steps forward."></textarea>
+          <div class="two-up">
+            <div><label for="camera">Camera</label><select id="camera"><option>Locked frame</option><option selected>Slow push-in</option><option>Gentle orbit</option><option>Handheld follow</option><option>Slow pull-back</option></select></div>
+            <div><label for="duration">Suggested length</label><select id="duration"><option>4 seconds</option><option selected>6 seconds</option><option>8 seconds</option><option>10 seconds</option></select></div>
+          </div>
+          <label for="sound">Sound / dialogue <span>optional</span></label>
+          <input id="sound" type="text" placeholder="Soft surf, gulls, and fabric moving in the wind." />
+        </div>
+
+        <div class="panel output-panel">
+          <div class="panel-heading"><span class="step">03</span><h2>Prompt pack</h2></div>
+          <p class="hint">This is assembled as you write. Detailed, directive prompts work best with 10Eros.</p>
+          <pre id="prompt-output" aria-live="polite">Start describing your scene to build a prompt.</pre>
+          <div class="actions"><button id="copy-prompt" type="button">Copy prompt</button><button id="download-pack" class="secondary" type="button">Download JSON</button></div>
+          <p id="copy-status" class="status" aria-live="polite"></p>
+          <div class="workflow-link"><span>Next step</span><a href="https://huggingface.co/TenStrip/LTX2.3-10Eros_Workflows" target="_blank" rel="noreferrer">Open official workflows ↗</a></div>
+        </div>
+      </section>
+
+      <section class="guide">
+        <p class="eyebrow">PROMPTING NOTES</p>
+        <div class="guide-grid"><article><h3>State the starting point</h3><p>Anchor the first frame with subject, composition, lighting, and setting.</p></article><article><h3>Sequence the movement</h3><p>Use a natural order: action, visible reaction, then any composition change.</p></article><article><h3>Keep audio purposeful</h3><p>Give short dialogue and a few audible cues only when they support the scene.</p></article></div>
+      </section>
+    </main>
+    <footer><span>Built for <a href="https://huggingface.co/TenStrip/LTX2.3-10Eros" target="_blank" rel="noreferrer">TenStrip/LTX2.3-10Eros</a></span><span>Use responsibly · Images never leave your browser</span></footer>
+    <script src="app.js"></script>
+  </body>
 </html>

style.css

@@ -1,28 +1,15 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}
+:root { --ink:#201927; --muted:#786d7e; --paper:#fffafc; --purple:#5726a2; --pink:#ee488d; --line:#e8dce7; --lavender:#f3edff; }
+* { box-sizing:border-box; }
+body { margin:0; color:var(--ink); background:radial-gradient(circle at 7% 0%, #f4e8ff 0, transparent 27rem), var(--paper); font-family:"DM Sans",Arial,sans-serif; }
+main, footer { max-width:1240px; margin:auto; padding-left:24px; padding-right:24px; }
+.hero { padding:72px 0 35px; max-width:780px; }.eyebrow { color:var(--purple); font:500 .73rem "DM Mono",monospace; letter-spacing:.15em; margin:0 0 14px; }
+h1 { font-size:clamp(2.6rem,6vw,5.6rem); line-height:.93; letter-spacing:-.065em; margin:0; } h1 span { color:var(--pink); display:block; }
+.lede { color:var(--muted); font-size:1.15rem; line-height:1.55; max-width:580px; margin:24px 0; }.badges { display:flex; gap:8px; flex-wrap:wrap; }.badges span { border:1px solid #d9c8e8; border-radius:999px; color:#624a78; font-size:.78rem; padding:6px 11px; }
+.notice { background:#27133f; color:#fff8ff; border-radius:14px; padding:15px 18px; font-size:.92rem; line-height:1.45; margin:0 0 22px; }.notice strong { color:#ffb8d8; }
+.studio { display:grid; grid-template-columns:1fr 1.35fr 1.1fr; gap:16px; align-items:start; }.panel { background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 8px 22px rgba(65,31,80,.035); }.panel-heading { display:flex; gap:10px; align-items:center; margin-bottom:18px; }.panel-heading h2 { font-size:1.03rem; margin:0; }.step { color:var(--pink); font:500 .75rem "DM Mono",monospace; }
+.dropzone { min-height:250px; border:1.5px dashed #c4a4d9; border-radius:11px; display:grid; place-items:center; position:relative; overflow:hidden; cursor:pointer; background:linear-gradient(135deg,#fbf7ff,#fff8fb); text-align:center; padding:16px; }.dropzone input { position:absolute; inset:0; opacity:0; cursor:pointer; }.dropzone img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }.dropzone strong, .dropzone small { display:block; }.dropzone small,.hint,label span { color:var(--muted); font-size:.76rem; }.upload-mark { color:var(--purple); display:block; font-size:1.9rem; line-height:1; margin-bottom:8px; }.text-button { border:0; background:none; color:var(--purple); padding:12px 0 0; cursor:pointer; }.hint { color:var(--muted); font-size:.8rem; line-height:1.5; }
+label { display:block; color:#433747; font-size:.83rem; font-weight:600; margin:16px 0 7px; } textarea,input,select { width:100%; color:var(--ink); border:1px solid #dcd0de; background:#fffdfd; border-radius:8px; padding:10px; font:400 .88rem "DM Sans",sans-serif; outline:none; } textarea { resize:vertical; line-height:1.45; } textarea:focus,input:focus,select:focus { border-color:var(--purple); box-shadow:0 0 0 3px #eee4fb; }.two-up { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.two-up label { margin-top:16px; }.presets { display:flex; flex-wrap:wrap; gap:6px; }.presets button,.secondary { background:var(--lavender); color:var(--purple); border:1px solid #d9c8f3; }.presets button { border-radius:999px; padding:6px 9px; font-size:.72rem; cursor:pointer; }
+pre { white-space:pre-wrap; word-break:break-word; min-height:310px; margin:0; padding:15px; background:#201827; color:#f8eefe; border-radius:10px; font:400 .79rem/1.6 "DM Mono",monospace; }.actions { display:flex; gap:8px; margin-top:12px; }.actions button { flex:1; border-radius:8px; padding:10px; font:600 .8rem "DM Sans",sans-serif; cursor:pointer; } #copy-prompt { border:1px solid var(--purple); color:white; background:var(--purple); }.status { color:var(--purple); min-height:1em; font-size:.78rem; }.workflow-link { border-top:1px solid var(--line); padding-top:14px; font-size:.8rem; display:flex; flex-direction:column; gap:4px; }.workflow-link span { color:var(--muted); }.workflow-link a,footer a { color:var(--purple); font-weight:600; }
+.guide { padding:72px 0; }.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }.guide h3 { margin:0 0 8px; font-size:1rem; }.guide article p { color:var(--muted); font-size:.9rem; line-height:1.5; margin:0; } footer { border-top:1px solid var(--line); padding-top:22px; padding-bottom:32px; color:var(--muted); display:flex; justify-content:space-between; gap:15px; font-size:.76rem; }
+@media (max-width:900px) { .studio { grid-template-columns:1fr 1fr; }.output-panel { grid-column:span 2; } pre { min-height:200px; } }
+@media (max-width:620px) { .hero { padding-top:48px; }.studio,.guide-grid { grid-template-columns:1fr; }.output-panel { grid-column:auto; }.two-up { grid-template-columns:1fr; gap:0; } footer { flex-direction:column; } }