Hugging Face's logo

Spaces:
Fraser
/
piclets
Running

App Files Community
Fraser commited on
Commit
f78c7af
·
1 Parent(s): 544b046

swapped to Zephyr-7B!

Browse files
Files changed (1) hide show
  1. prototype_index.html +34 -24
prototype_index.html CHANGED
@@ -82,11 +82,11 @@
82
  </head>
83
  <body>
84
  <div class="card">
85
- <h1>FLUX-1 Schnell + Joy Caption + RWKV Space</h1>
86
  <p>
87
  This static Space demonstrates how to call a remote Gradio Space while
88
  letting <strong>each visitor&rsquo;s own Hugging Face subscription</strong> cover
89
- the compute costs. Generate images with FLUX-1, caption them with Joy Caption, and generate text with RWKV.
90
  </p>
91
 
92
  <!-- 1️⃣ Sign-in button (shown only when needed) -->
@@ -166,30 +166,33 @@
166
  <label for="textPrompt">Prompt</label>
167
  <textarea id="textPrompt" rows="4" placeholder="Enter your prompt here..." style="width:100%; padding:0.5rem; border:1px solid #ccc; border-radius:4px; box-sizing:border-box; margin-bottom:1rem;"></textarea>
168
 
 
 
 
169
  <div style="display:flex; gap:1rem;">
170
  <div style="flex:1;">
171
- <label for="maxTokens">Max Tokens</label>
172
- <input type="number" id="maxTokens" value="200" min="10" max="1000" step="10" />
173
  </div>
174
  <div style="flex:1;">
175
  <label for="temperature">Temperature</label>
176
- <input type="number" id="temperature" value="1.0" min="0.2" max="2.0" step="0.1" />
177
  </div>
178
  </div>
179
 
180
  <div style="display:flex; gap:1rem;">
181
  <div style="flex:1;">
182
  <label for="topP">Top P</label>
183
- <input type="number" id="topP" value="0.7" min="0.0" max="1.0" step="0.05" />
184
  </div>
185
  <div style="flex:1;">
186
- <label for="presencePenalty">Presence Penalty</label>
187
- <input type="number" id="presencePenalty" value="0.1" min="0.0" max="1.0" step="0.1" />
188
  </div>
189
  </div>
190
 
191
- <label for="countPenalty">Count Penalty</label>
192
- <input type="number" id="countPenalty" value="0.1" min="0.0" max="1.0" step="0.1" />
193
 
194
  <button type="submit" class="generate">Generate Text</button>
195
  </form>
@@ -254,7 +257,7 @@
254
  */
255
  async function startApp(hfToken, userInfo = null) {
256
  try {
257
- banner.textContent = "Connecting to FLUX.1-schnell, Joy Caption, and RWKV…";
258
  banner.style.display = "block";
259
 
260
  const opts = hfToken ? { hf_token: hfToken } : {};
@@ -268,8 +271,9 @@
268
  opts
269
  );
270
 
271
- const rwkv = await Client.connect(
272
- "BlinkDL/RWKV-Gradio-2",
 
273
  opts
274
  );
275
 
@@ -401,11 +405,12 @@
401
  e.preventDefault();
402
 
403
  const prompt = document.getElementById("textPrompt").value.trim();
404
- const maxTokens = parseInt(document.getElementById("maxTokens").value, 10);
 
405
  const temperature = parseFloat(document.getElementById("temperature").value);
406
  const topP = parseFloat(document.getElementById("topP").value);
407
- const presencePenalty = parseFloat(document.getElementById("presencePenalty").value);
408
- const countPenalty = parseFloat(document.getElementById("countPenalty").value);
409
 
410
  if (!prompt) {
411
  textResultDiv.innerHTML = "<p style='color:red;'>Please enter a prompt.</p>";
@@ -418,16 +423,21 @@
418
  textResultDiv.innerHTML = "Generating text…";
419
 
420
  try {
421
- const output = await rwkv.predict(0, [
422
- prompt,
423
- maxTokens,
424
- temperature,
425
- topP,
426
- presencePenalty,
427
- countPenalty
 
 
 
 
428
  ]);
429
 
430
- const generatedText = output.data[0];
 
431
  textResultDiv.innerHTML = `
432
  <div style="background:#f8f9fa; padding:1rem; border-radius:6px; margin-top:1rem;">
433
  <h4>Generated Text</h4>
 
82
  </head>
83
  <body>
84
  <div class="card">
85
+ <h1>FLUX-1 Schnell + Joy Caption + Zephyr-7B</h1>
86
  <p>
87
  This static Space demonstrates how to call a remote Gradio Space while
88
  letting <strong>each visitor&rsquo;s own Hugging Face subscription</strong> cover
89
+ the compute costs. Generate images with FLUX-1, caption them with Joy Caption, and generate text with Zephyr-7B.
90
  </p>
91
 
92
  <!-- 1️⃣ Sign-in button (shown only when needed) -->
 
166
  <label for="textPrompt">Prompt</label>
167
  <textarea id="textPrompt" rows="4" placeholder="Enter your prompt here..." style="width:100%; padding:0.5rem; border:1px solid #ccc; border-radius:4px; box-sizing:border-box; margin-bottom:1rem;"></textarea>
168
 
169
+ <label for="systemPrompt">System Prompt</label>
170
+ <textarea id="systemPrompt" rows="3" placeholder="You are a helpful assistant..." style="width:100%; padding:0.5rem; border:1px solid #ccc; border-radius:4px; box-sizing:border-box; margin-bottom:1rem;"></textarea>
171
+
172
  <div style="display:flex; gap:1rem;">
173
  <div style="flex:1;">
174
+ <label for="maxNewTokens">Max New Tokens</label>
175
+ <input type="number" id="maxNewTokens" value="1024" min="1" max="2048" step="1" />
176
  </div>
177
  <div style="flex:1;">
178
  <label for="temperature">Temperature</label>
179
+ <input type="number" id="temperature" value="0.7" min="0.1" max="4.0" step="0.1" />
180
  </div>
181
  </div>
182
 
183
  <div style="display:flex; gap:1rem;">
184
  <div style="flex:1;">
185
  <label for="topP">Top P</label>
186
+ <input type="number" id="topP" value="0.95" min="0.05" max="1.0" step="0.05" />
187
  </div>
188
  <div style="flex:1;">
189
+ <label for="topK">Top K</label>
190
+ <input type="number" id="topK" value="50" min="1" max="1000" step="1" />
191
  </div>
192
  </div>
193
 
194
+ <label for="repetitionPenalty">Repetition Penalty</label>
195
+ <input type="number" id="repetitionPenalty" value="1.0" min="1.0" max="2.0" step="0.05" />
196
 
197
  <button type="submit" class="generate">Generate Text</button>
198
  </form>
 
257
  */
258
  async function startApp(hfToken, userInfo = null) {
259
  try {
260
+ banner.textContent = "Connecting to FLUX.1-schnell, Joy Caption, and Zephyr-7B…";
261
  banner.style.display = "block";
262
 
263
  const opts = hfToken ? { hf_token: hfToken } : {};
 
271
  opts
272
  );
273
 
274
+ // Connect to Zephyr-7B on Hugging Face Spaces
275
+ const zephyr = await Client.connect(
276
+ "hysts/zephyr-7b",
277
  opts
278
  );
279
 
 
405
  e.preventDefault();
406
 
407
  const prompt = document.getElementById("textPrompt").value.trim();
408
+ const systemPrompt = document.getElementById("systemPrompt").value.trim();
409
+ const maxNewTokens = parseInt(document.getElementById("maxNewTokens").value, 10);
410
  const temperature = parseFloat(document.getElementById("temperature").value);
411
  const topP = parseFloat(document.getElementById("topP").value);
412
+ const topK = parseInt(document.getElementById("topK").value, 10);
413
+ const repetitionPenalty = parseFloat(document.getElementById("repetitionPenalty").value);
414
 
415
  if (!prompt) {
416
  textResultDiv.innerHTML = "<p style='color:red;'>Please enter a prompt.</p>";
 
423
  textResultDiv.innerHTML = "Generating text…";
424
 
425
  try {
426
+ // Call Zephyr-7B ChatInterface with proper parameters
427
+ // ChatInterface expects positional args: message, chat_history, then additional_inputs
428
+ const output = await zephyr.predict("/chat", [
429
+ prompt, // message
430
+ [], // chat_history (empty for single turn)
431
+ systemPrompt, // system_prompt (additional_input 1)
432
+ maxNewTokens, // max_new_tokens (additional_input 2)
433
+ temperature, // temperature (additional_input 3)
434
+ topP, // top_p (additional_input 4)
435
+ topK, // top_k (additional_input 5)
436
+ repetitionPenalty // repetition_penalty (additional_input 6)
437
  ]);
438
 
439
+ // ChatInterface returns the full response
440
+ const generatedText = output.data;
441
  textResultDiv.innerHTML = `
442
  <div style="background:#f8f9fa; padding:1rem; border-radius:6px; margin-top:1rem;">
443
  <h4>Generated Text</h4>