Updated

app.py

@@ -7,29 +7,40 @@ import torch
 import gradio as gr
 
 
+MAGICODER_PROMPT = """You are an exceptionally intelligent coding assistant that consistently delivers accurate and reliable responses to user instructions.
+@@ Instruction
+{instruction}
+@@ Response
+"""
+
+css = """
+#q-output {
+    max-height: 60vh;
+    overflow: auto;
+}
+"""
+
+title = "<h1 style='text-align: center; margin-bottom: 1rem'>🎩 Magicoder</h1>"
+
+description = """This is a playground for Magicoder-S-DS-6.7B! Follow us on Github: https://github.com/ise-uiuc/magicoder and Huggingface: https://huggingface.co/ise-uiuc.
+💡 Tips: You can include more details in your instruction for Magicoder to write better code for you! Details can be, but not limited to, as follows:
+1. Specify your programming language (e.g., "... in Python" and "... in Java")
+2. Specify the external libraries/packages that are necessary in your task (e.g., "... using the turtle library" and "Write a gradio application to ...")
+3. Demonstrate your requirements as clear and comprehensive as possible (e.g., "use CNN as the model structure" and "draw a chart of the training loss")"""
+
+
 def main(
-    base_model="ise-uiuc/Magicoder-S-DS-6.7B",
-    port=8080,
+    base_model="ise-uiuc/Magicoder-S-DS-6.7B"
 ):
-    tokenizer = AutoTokenizer.from_pretrained(base_model)
     pipeline = transformers.pipeline(
-        "text-generation",
-        model=base_model,
-        torch_dtype=torch.float16,
-        device_map="auto"
+        "text-generation", model=base_model, torch_dtype=torch.bfloat16, device_map="auto"
     )
+
     def evaluate_magicoder(
         instruction,
         temperature=1,
-        max_new_tokens=2048,
+        max_length=2048,
     ):
-        MAGICODER_PROMPT = """You are an exceptionally intelligent coding assistant that consistently delivers accurate and reliable responses to user instructions.
-
-@@ Instruction
-{instruction}
-
-@@ Response
-""" 
         prompt = MAGICODER_PROMPT.format(instruction=instruction)
 
         if temperature > 0:
@@ -37,41 +48,53 @@ def main(
                 prompt,
                 do_sample=True,
                 temperature=temperature,
-                max_new_tokens=max_new_tokens,
+                max_length=max_length,
             )
         else:
             sequences = pipeline(
                 prompt,
-                max_new_tokens=max_new_tokens,
+                max_length=max_length,
             )
         for seq in sequences:
-            print('==========================question=============================')
-            print(prompt)
-            generated_text = seq['generated_text'].replace(prompt, "")
-            print('===========================answer=============================')
-            print(generated_text)
+            generated_text = seq["generated_text"].replace(prompt, "")
             return generated_text
 
-    gr.Interface(
-        fn=evaluate_magicoder,
-        inputs=[
-            gr.components.Textbox(
-                lines=3, label="Instruction", placeholder="Anything you want to ask Magicoder ?"
-            ),
-            gr.components.Slider(minimum=0, maximum=1, value=1, label="Temperature"),
-            gr.components.Slider(
-                minimum=1, maximum=2048, step=1, value=512, label="Max tokens"
-            ),
-        ],
-        outputs=[
-            gr.components.Textbox(
-                lines=30,
-                label="Output",
+    with gr.Blocks(css=css) as demo:
+        gr.Markdown(title)
+        gr.Markdown(description)
+        with gr.Row(equal_height=True):
+            with gr.Column(variant="default"):
+                interface_input = gr.Textbox(
+                    lines=3,
+                    label="Instruction",
+                    placeholder="Anything you want to ask Magicoder ?",
+                    value="Write a snake game in Python using the turtle library (the game is created by Magicoder).",
+                )
+                temperature = gr.Slider(minimum=0, maximum=1, value=0, label="Temperature")
+                max_new_tokens = gr.Slider(
+                    minimum=1, maximum=2048, step=1, value=2048, label="Max tokens"
+                )
+                submit = gr.Button(value="Generate")
+                gr.Examples(
+                    examples=[
+                        ["Write a snake game in Python using the turtle library (the game is created by Magicoder)."],
+                        ["Build a console-based Othello game in Java with row and column numbers shown on the board. The game should end when there are no more valid moves for either player."],
+                        ["Write a gradio (3.48.0) application for the following use case: Take an input image and return a 45 degree clockwise rotated image. You should also add text description under the output showing the rotation degree."],
+                        ["Build a simple neural network in Python using Pytorch to classify handwritten digits from the MNIST dataset. You should use CNN as the model structure, train the model for 5 epochs, draw a chart of the training loss, and show the final result."],
+                    ],
+                    inputs = [interface_input]
+                )
+            with gr.Column(variant="default"):
+                with gr.Tab("Output", elem_id="q-output"):
+                    output = gr.Markdown(
+                        label="Output"
+                    )
+            submit.click(
+                evaluate_magicoder,
+                inputs=[interface_input, temperature, max_new_tokens],
+                outputs=[output],
             )
-        ],
-        title="Magicoder",
-        description="This is a LLM playground for Magicoder! Follow us on Github: https://github.com/ise-uiuc/magicoder and Huggingface: https://huggingface.co/ise-uiuc."
-    ).queue().launch()
+    demo.queue().launch()
 
 if __name__ == "__main__":
-    fire.Fire(main)
+    fire.Fire(main)