BajanYSL/FLUX.1-dev
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1" />6 <title>FLUX.1 [dev]</title>7 <link rel="stylesheet" href="style.css" />8 <script src="https://cdn.jsdelivr.net/npm/es-module-shims@1.10.0/dist/es-module-shims.js"></script>9 <script type="importmap">10 {11 "imports": {12 "@huggingface/hub": "https://cdn.jsdelivr.net/npm/@huggingface/hub@2.16.3/+esm",13 "@huggingface/inference": "https://cdn.jsdelivr.net/npm/@huggingface/inference@4.13.28/+esm"14 }15 }16 </script>17</head>18<body>19 <main>20 <header>21 <h1>FLUX.1 <span class="dim">[dev]</span></h1>22 <p class="sub">23 A 12B rectified-flow transformer from24 <a href="https://blackforestlabs.ai/" target="_blank" rel="noopener">Black Forest Labs</a>,25 guidance-distilled from FLUX.1 [pro].26 </p>27 <p class="links">28 <a href="https://huggingface.co/black-forest-labs/FLUX.1-dev" target="_blank" rel="noopener">model</a>29 <span class="sep">·</span>30 <a href="https://huggingface.co/black-forest-labs/FLUX.1-dev/blob/main/LICENSE.md" target="_blank" rel="noopener">non-commercial license</a>31 <span class="sep">·</span>32 <a href="https://huggingface.co/docs/inference-providers" target="_blank" rel="noopener">inference providers</a>33 </p>34 </header>35 36 <section id="auth-gate" class="card gate" hidden>37 <h2>Sign in to generate</h2>38 <p>39 This Space has no GPU of its own. It calls FLUX.1 [dev] through the Hugging Face40 Inference Providers router using <strong>your</strong> account, so generations come41 out of your own included credits rather than the Space owner's. Your token stays in42 this browser.43 </p>44 <img id="signin"45 src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-xl-dark.svg"46 alt="Sign in with Hugging Face" />47 </section>48 49 <section id="app" hidden>50 <div class="whoami">51 <span id="user-label"></span>52 <button id="signout" class="linkish" type="button">Sign out</button>53 </div>54 55 <div class="prompt-row">56 <textarea id="prompt" rows="2" placeholder="Describe the image you want"></textarea>57 <button id="run" type="button">Generate</button>58 </div>59 60 <div class="examples">61 <span class="dim">Try:</span>62 <button class="chip" type="button">a tiny astronaut hatching from an egg on the moon</button>63 <button class="chip" type="button">a cat holding a sign that says hello world</button>64 <button class="chip" type="button">an anime illustration of a wiener schnitzel</button>65 </div>66 67 <details class="card">68 <summary>Advanced settings</summary>69 <div class="grid">70 <label>Width <output id="width-out">1024</output>71 <input id="width" type="range" min="256" max="1440" step="16" value="1024" />72 </label>73 <label>Height <output id="height-out">1024</output>74 <input id="height" type="range" min="256" max="1440" step="16" value="1024" />75 </label>76 <label>Guidance scale <output id="guidance-out">3.5</output>77 <input id="guidance" type="range" min="1" max="15" step="0.1" value="3.5" />78 </label>79 <label>Inference steps <output id="steps-out">28</output>80 <input id="steps" type="range" min="1" max="50" step="1" value="28" />81 </label>82 <label class="wide">Seed83 <span class="seed-row">84 <input id="seed" type="number" min="0" max="2147483647" step="1" value="0" />85 <label class="inline"><input id="randomize" type="checkbox" checked /> Randomize</label>86 </span>87 </label>88 <label class="wide">Provider89 <select id="provider">90 <option value="auto">Auto (first available)</option>91 <option value="fal-ai">fal.ai</option>92 <option value="replicate">Replicate</option>93 <option value="wavespeed">WaveSpeed</option>94 </select>95 </label>96 </div>97 </details>98 99 <div id="status" class="status" hidden></div>100 101 <figure id="result" hidden>102 <img id="result-img" alt="Generated image" />103 <figcaption>104 <span id="result-meta"></span>105 <a id="download" download="flux-dev.png">Download</a>106 </figcaption>107 </figure>108 </section>109 </main>110 111 <script type="module" src="app.js"></script>112</body>113</html>114