first commit

app.py

@@ -0,0 +1,115 @@
+import gradio as gr
+import requests
+import json
+import os
+from screenshot import (
+    before_prompt,
+    prompt_to_generation,
+    after_generation,
+    js_save,
+    js_load_script,
+)
+from spaces_info import description, examples, initial_prompt_value
+
+#API_URL = os.getenv("API_URL")
+#HF_API_TOKEN = os.getenv("HF_API_TOKEN")
+
+API_URL = "https://api-inference.huggingface.co/models/bigscience/bloom-560m"
+HF_API_TOKEN = "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"
+
+def query(payload):
+    print(payload)
+    response = requests.request("POST", API_URL, json=payload, headers={"Authorization": f"Bearer {HF_API_TOKEN}"})
+    print(response)
+    return json.loads(response.content.decode("utf-8"))
+
+
+def inference(input_sentence, max_length, sample_or_greedy, seed=42):
+    if sample_or_greedy == "Sample":
+        parameters = {
+            "max_new_tokens": max_length,
+            "top_p": 0.9,
+            "do_sample": True,
+            "seed": seed,
+            "early_stopping": False,
+            "length_penalty": 0.0,
+            "eos_token_id": None,
+        }
+    else:
+        parameters = {
+            "max_new_tokens": max_length,
+            "do_sample": False,
+            "seed": seed,
+            "early_stopping": False,
+            "length_penalty": 0.0,
+            "eos_token_id": None,
+        }
+
+    payload = {"inputs": input_sentence, "parameters": parameters,"options" : {"use_cache": False} }
+
+    data = query(payload)
+
+    if "error" in data:
+        return (None, None, f"<span style='color:red'>ERROR: {data['error']} </span>")
+
+    generation = data[0]["generated_text"].split(input_sentence, 1)[1]
+    return (
+        before_prompt
+        + input_sentence
+        + prompt_to_generation
+        + generation
+        + after_generation,
+        data[0]["generated_text"],
+        "",
+    )
+
+
+if __name__ == "__main__":
+    demo = gr.Blocks()
+    with demo:
+        with gr.Row():
+            gr.Markdown(value=description)
+        with gr.Row():
+            with gr.Column():
+                text = gr.Textbox(
+                    label="Input",
+                    value=" ",  # should be set to " " when plugged into a real API
+                )
+                tokens = gr.Slider(1, 64, value=32, step=1, label="Tokens to generate")
+                sampling = gr.Radio(
+                    ["Sample", "Greedy"], label="Sample or greedy", value="Sample"
+                )
+                sampling2 = gr.Radio(
+                    ["Sample 1", "Sample 2", "Sample 3", "Sample 4", "Sample 5"],
+                    value="Sample 1",
+                    label="Sample other generations (only work in 'Sample' mode)",
+                    type="index",
+                )
+
+                with gr.Row():
+                    submit = gr.Button("Submit")
+                    load_image = gr.Button("Generate Image")
+            with gr.Column():
+                text_error = gr.Markdown(label="Log information")
+                text_out = gr.Textbox(label="Output")
+                display_out = gr.HTML(label="Image")
+                display_out.set_event_trigger(
+                    "load",
+                    fn=None,
+                    inputs=None,
+                    outputs=None,
+                    no_target=True,
+                    js=js_load_script,
+                )
+        with gr.Row():
+            gr.Examples(examples=examples, inputs=[text, tokens, sampling, sampling2])
+
+        submit.click(
+            inference,
+            inputs=[text, tokens, sampling, sampling2],
+            outputs=[display_out, text_out, text_error],
+        )
+
+        load_image.click(fn=None, inputs=None, outputs=None, _js=js_save)
+
+    demo.launch()

screenshot.py

@@ -0,0 +1,56 @@
+## HTML and JS code to give Gradio HTML
+before_prompt = """
+  <div id = "img_placeholder">
+  </div>
+  <div class="relative" id="capture" align="justify" style="display:none;">
+    <div class="absolute font-semibold" style="left:7%; right:7%; bottom:32%; top:7%; font-size: 8rem; line-height: 1; padding: 1rem; font-family:-apple-system, BlinkMacSystemFont, 'Arial', sans-serif;" id="text_box">
+      <p class="text" style="color:white; white-space:pre-wrap;" dir="auto" id = "prompt">"""
+prompt_to_generation = """</p>
+        <p class="text" style="color:#FE57A0; white-space:pre-wrap;" dir="auto" id="generation">"""
+after_generation = """</p>
+    </div>
+    <img src="https://huggingface.co/spaces/huggingface/bloom_demo/raw/main/bg.jpg" class="w-full" />
+  </div>
+"""
+
+js_save = """() => {
+      /*might need to add .root to launch locally */
+      var gradioapp = document.body.getElementsByTagName('gradio-app')[0]; 
+      
+      /* Save image */
+      capture = gradioapp.querySelector('#capture')
+      img_placeholder = gradioapp.querySelector('#img_placeholder')
+      html2canvas(capture, {
+            useCORS: true,
+            onclone: function (clonedDoc) {
+                  clonedDoc.querySelector('#capture').style.display = 'block';
+                  
+                  /*Fits text to box*/
+                  var text_box = clonedDoc.querySelector('#text_box');
+                  var prompt = clonedDoc.querySelector('#prompt');
+                  var generation = clonedDoc.querySelector('#generation');
+                  console.log(text_box, generation, prompt)
+                  cur_font_size = getComputedStyle(text_box).getPropertyValue("font-size")
+                  while( (text_box.clientHeight < text_box.scrollHeight || text_box.clientWidth < text_box.scrollWidth) &  parseInt(cur_font_size) > 10) {
+                    console.log(cur_font_size, text_box.clientHeight, text_box.scrollHeight, text_box.clientWidth, text_box.scrollWidth)
+                    cur_font_size = 0.98 * parseInt(cur_font_size) + "px"
+                    cur_line_height = 1.1 * parseInt(cur_font_size) + "px"
+                    text_box.style.fontSize = cur_font_size
+                    prompt.style.fontSize = cur_font_size
+                    generation.style.fontSize = cur_font_size
+                    text_box.style.lineHeight = cur_line_height
+                    prompt.style.lineHeight = cur_line_height
+                    generation.style.lineHeight = cur_line_height
+                  }
+            }
+        }).then((canvas)=>{
+          img_placeholder.prepend(canvas);
+        })
+}"""
+
+
+js_load_script="""() => {
+                  var script = document.createElement('script');
+                  script.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js";
+                  document.head.appendChild(script);
+}"""

spaces_info.py

@@ -0,0 +1,76 @@
+description = """Gradio Demo for BLOOM. To use it, simply add your text, or click one of the examples to load them.
+Tips:
+- Do NOT talk to BLOOM as an entity, it's not a chatbot but a webpage/blog/article completion model.
+- For the best results: MIMIC a few sentences of a webpage similar to the content you want to generate.
+Start a paragraph as if YOU were writing a blog, webpage, math post, coding article and BLOOM will generate a coherent follow-up. Longer prompts usually give more interesting results.
+- Content: Please see our [content disclaimer](https://hf.co/spaces/bigscience/bloom-book) before using the model, as it may sometimes behave in unexpected ways.
+
+Options:
+- sampling: imaginative completions (may be not super accurate e.g. math/history)
+- greedy: accurate completions (may be more boring or have repetitions)
+"""
+
+wip_description = """JAX / Flax Gradio Demo for BLOOM. The 176B BLOOM model running on a TPU v3-256 pod, with 2D model parallelism and custom mesh axes.
+Note:
+1. For this WIP demo, only **sampling** is supported.
+2. Rendering of the screenshot is currently not optimised. To experience the true speed of JAX / Flax, tick 'just output raw text'.
+"""
+
+examples = [
+    [
+        'A "whatpu" is a small, furry animal native to Tanzania. An example of a sentence that uses the word whatpu is: We were traveling in Africa and we saw these very cute whatpus. To do a "farduddle" means to jump up and down really fast. An example of a sentence that uses the word farduddle is:',
+        32,
+        "Sample",
+        "Sample 1",
+    ],
+    [
+        "A poem about the beauty of science by Alfred Edgar Brittle\nTitle: The Magic Craft\nIn the old times",
+        50,
+        "Sample",
+        "Sample 1",
+    ],
+    ["استخراج العدد العاملي في لغة بايثون:", 30, "Greedy", "Sample 1"],
+    ["Pour déguster un ortolan, il faut tout d'abord", 32, "Sample", "Sample 1"],
+    [
+        "Traduce español de España a español de Argentina\nEl coche es rojo - el auto es rojo\nEl ordenador es nuevo - la computadora es nueva\nel boligrafo es negro -",
+        16,
+        "Sample",
+        "Sample 1",
+    ],
+    [
+        "Estos ejemplos quitan vocales de las palabras\nEjemplos:\nhola - hl\nmanzana - mnzn\npapas - pps\nalacran - lcrn\npapa -",
+        16,
+        "Sample",
+        "Sample 1",
+    ],
+    [
+        "Question: If I put cheese into the fridge, will it melt?\nAnswer:",
+        32,
+        "Sample",
+        "Sample 1",
+    ],
+    ["Math exercise - answers:\n34+10=44\n54+20=", 16, "Greedy", "Sample 1"],
+    [
+        "Question: Where does the Greek Goddess Persephone spend half of the year when she is not with her mother?\nAnswer:",
+        24,
+        "Greedy",
+        "Sample 1",
+    ],
+    [
+        "spelling test answers.\nWhat are the letters in « language »?\nAnswer: l-a-n-g-u-a-g-e\nWhat are the letters in « Romanian »?\nAnswer:",
+        24,
+        "Greedy",
+        "Sample 1",
+    ],
+]
+
+initial_prompt_value = """استخراج العدد العاملي في لغة بايثون :
+def factorial(n):
+    if n == 0:
+        return 1
+    else:
+        result = 1
+        for i in range(1, n + 1) :
+            result *= i
+    return result
+print(factorial(5))"""