Adds LLM to the Playground

.changeset/witty-worlds-grin.md

@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Adds LLM to the Playground

demo/annotatedimage_component/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: annotatedimage_component"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pathlib\n", "from PIL import Image\n", "import numpy as np\n", "import urllib.request\n", "\n", "source_dir = pathlib.Path(__file__).parent\n", "\n", "urllib.request.urlretrieve(\n", "  'https://gradio-builds.s3.amazonaws.com/demo-files/base.png',\n", "   str(source_dir / \"base.png\")\n", ")\n", "urllib.request.urlretrieve(\n", "    \"https://gradio-builds.s3.amazonaws.com/demo-files/buildings.png\",\n", "    str(source_dir / \"buildings.png\")\n", ")\n", "\n", "base_image = Image.open(str(source_dir / \"base.png\"))\n", "building_image = Image.open(str(source_dir / \"buildings.png\"))\n", "\n", "# Create segmentation mask\n", "building_image = np.asarray(building_image)[:, :, -1] > 0\n", "\n", "with gr.Blocks() as demo:\n", "    gr.AnnotatedImage(\n", "        value=(base_image, [(building_image, \"buildings\")]),\n", "        height=500,\n", "    )\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: annotatedimage_component"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np \n", "import requests \n", "from io import BytesIO\n", "from PIL import Image\n", "\n", "base_image = \"https://gradio-docs-json.s3.us-west-2.amazonaws.com/base.png\"\n", "building_image = requests.get(\"https://gradio-docs-json.s3.us-west-2.amazonaws.com/buildings.png\")\n", "building_image = np.asarray(Image.open(BytesIO(building_image.content)))[:, :, -1] > 0\n", "\n", "with gr.Blocks() as demo:\n", "    gr.AnnotatedImage(\n", "        value=(base_image, [(building_image, \"buildings\")]),\n", "        height=500,\n", "    )\n", "\n", "demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/annotatedimage_component/run.py

@@ -1,30 +1,17 @@
 import gradio as gr
-import pathlib
+import numpy as np 
+import requests 
+from io import BytesIO
 from PIL import Image
-import numpy as np
-import urllib.request
 
-source_dir = pathlib.Path(__file__).parent
-
-urllib.request.urlretrieve(
-  'https://gradio-builds.s3.amazonaws.com/demo-files/base.png',
-   str(source_dir / "base.png")
-)
-urllib.request.urlretrieve(
-    "https://gradio-builds.s3.amazonaws.com/demo-files/buildings.png",
-    str(source_dir / "buildings.png")
-)
-
-base_image = Image.open(str(source_dir / "base.png"))
-building_image = Image.open(str(source_dir / "buildings.png"))
-
-# Create segmentation mask
-building_image = np.asarray(building_image)[:, :, -1] > 0
+base_image = "https://gradio-docs-json.s3.us-west-2.amazonaws.com/base.png"
+building_image = requests.get("https://gradio-docs-json.s3.us-west-2.amazonaws.com/buildings.png")
+building_image = np.asarray(Image.open(BytesIO(building_image.content)))[:, :, -1] > 0
 
 with gr.Blocks() as demo:
     gr.AnnotatedImage(
         value=(base_image, [(building_image, "buildings")]),
         height=500,
     )
 
-demo.launch()
+demo.launch()

js/_website/generate_jsons/generate.py

@@ -6,6 +6,7 @@
 from botocore import UNSIGNED
 from botocore.client import Config
 
+from js._website.generate_jsons.src.docs import SYSTEM_PROMPT_8K
 from src import changelog, demos, docs, guides
 
 WEBSITE_DIR = os.path.abspath(os.path.join(os.path.dirname(__file__), ".."))
@@ -63,11 +64,12 @@ def get_latest_release():
                 .strip("'\n")
             )
             json.dump(
-                {
-                    "gradio_install": f"pip install https://gradio-builds.s3.amazonaws.com/{sha}/gradio-{version}-py3-none-any.whl",
-                    "gradio_py_client_install": f"pip install 'gradio-client @ git+https://github.com/gradio-app/gradio@{sha}#subdirectory=client/python'",
-                    "gradio_js_client_install": f"npm install https://gradio-builds.s3.amazonaws.com/{sha}/gradio-client-{js_client_version}.tgz",
-                },
+                    {
+                        "gradio_install": f"pip install https://gradio-builds.s3.amazonaws.com/{sha}/gradio-{version}-py3-none-any.whl",
+                        "gradio_py_client_install": f"pip install 'gradio-client @ git+https://github.com/gradio-app/gradio@{sha}#subdirectory=client/python'",
+                        "gradio_js_client_install": f"npm install https://gradio-builds.s3.amazonaws.com/{sha}/gradio-client-{js_client_version}.tgz",
+                        "gradio_lite_url": f"https://gradio-lite-previews.s3.amazonaws.com/{sha}"
+                    },
                 j,
             )
         if not os.path.exists(
@@ -90,9 +92,18 @@ def create_dir_if_not_exists(path):
 
 demos.generate(make_dir(WEBSITE_DIR, "src/lib/json/demos.json"))
 guides.generate(make_dir(WEBSITE_DIR, "src/lib/json/guides/") + "/")
-docs.generate(make_dir(WEBSITE_DIR, "src/lib/json/docs.json"))
-docs.generate(make_dir(WEBSITE_DIR, "src/lib/templates/docs.json"))
+SYSTEM_PROMPT, SYSTEM_PROMPT_8K = docs.generate(make_dir(WEBSITE_DIR, "src/lib/json/docs.json"))
+_, _ = docs.generate(make_dir(WEBSITE_DIR, "src/lib/templates/docs.json"))
 changelog.generate(make_dir(WEBSITE_DIR, "src/lib/json/changelog.json"))
 get_latest_release()
 
+with open(make_dir(WEBSITE_DIR, "src/lib/json/system_prompt.json"), "w+") as f:
+    json.dump(
+        {
+            "SYSTEM": SYSTEM_PROMPT,
+            "SYSTEM_8K": SYSTEM_PROMPT_8K,
+        },
+        f,
+    )
+
 print("JSON generated! " + make_dir(WEBSITE_DIR, "src/lib/json/"))

js/_website/generate_jsons/src/docs/__init__.py

@@ -253,6 +253,125 @@ def organize_pages():
 
 docs = organize_docs(docs)
 
+gradio_docs = docs["docs"]["gradio"]
+
+SYSTEM_PROMPT = """
+Generate code for using the Gradio python library. 
+
+The following RULES must be followed.  Whenever you are forming a response, ensure all rules have been followed otherwise start over.
+
+RULES: 
+Only respond with code, not text.
+Only respond with valid Python syntax.
+Never include backticks in your response such as ``` or ```python. 
+Never use any external library aside from: gradio, numpy, pandas, plotly, transformers_js and matplotlib.
+Do not include any code that is not necessary for the app to run.
+Respond with a full Gradio app. 
+Only respond with one full Gradio app.
+Add comments explaining the code, but do not include any text that is not formatted as a Python comment.
+
+
+
+Here's an example of a valid response:
+
+# This is a simple Gradio app that greets the user.
+import gradio as gr
+
+# Define a function that takes a name and returns a greeting.
+def greet(name):
+    return "Hello " + name + "!"
+
+# Create a Gradio interface that takes a textbox input, runs it through the greet function, and returns output to a textbox.`
+demo = gr.Interface(fn=greet, inputs="textbox", outputs="textbox")
+
+# Launch the interface.
+demo.launch()
+
+
+Here are some more examples of Gradio apps:
+
+
+"""
+
+
+
+important_demos = ["annotatedimage_component", "audio_component_events", "audio_mixer", "blocks_chained_events", "blocks_essay", "blocks_essay_simple", "blocks_flipper", "blocks_form", "blocks_hello", "blocks_js_load", "blocks_js_methods", "blocks_kinematics", "blocks_layout", "blocks_plug", "blocks_simple_squares", "blocks_update", "blocks_xray", "calculator", "chatbot_consecutive", "chatbot_multimodal", "chatbot_simple", "chatbot_streaming", "chatinterface_multimodal", "custom_css", "datetimes", "diff_texts", "dropdown_key_up", "fake_diffusion", "fake_gan", "filter_records", "function_values", "gallery_component_events", "generate_tone", "hangman", "hello_blocks", "hello_blocks_decorator", "hello_world", "image_editor", "matrix_transpose", "model3D", "on_listener_decorator", "plot_component", "render_merge", "render_split", "reverse_audio_2", "sales_projections", "sentence_builder", "sepia_filter", "sort_records", "streaming_simple", "tabbed_interface_lite", "tax_calculator", "theme_soft", "timer", "timer_simple", "variable_outputs", "video_identity"]
+
+important_demos_8k = ["blocks_essay_simple", "blocks_flipper", "blocks_form", "blocks_hello", "blocks_kinematics", "blocks_layout", "blocks_simple_squares", "calculator", "chatbot_consecutive", "chatbot_simple", "chatbot_streaming", "chatinterface_multimodal", "datetimes", "diff_texts", "dropdown_key_up", "fake_diffusion", "filter_records", "generate_tone", "hangman", "hello_blocks", "hello_blocks_decorator", "hello_world", "image_editor", "matrix_transpose", "model3D", "on_listener_decorator", "plot_component", "render_merge", "render_split", "reverse_audio_2", "sepia_filter", "sort_records", "streaming_simple", "tabbed_interface_lite", "tax_calculator", "theme_soft", "timer", "timer_simple", "variable_outputs", "video_identity"]
+
+
+def length(demo):
+    if os.path.exists(os.path.join(DEMOS_DIR, demo, "run.py")):
+        demo_file = os.path.join(DEMOS_DIR, demo, "run.py")
+    else: 
+        return 0
+    with open(demo_file) as run_py:
+        demo_code = run_py.read()
+        demo_code = demo_code.replace("# type: ignore", "").replace('if __name__ == "__main__":\n    ', "")
+    return len(demo_code)
+
+
+SYSTEM_PROMPT += "\n\nHere are some demos showcasing full Gradio apps: \n\n"
+
+SYSTEM_PROMPT_8K = SYSTEM_PROMPT
+
+for demo in important_demos:
+    if os.path.exists(os.path.join(DEMOS_DIR, demo, "run.py")):
+        demo_file = os.path.join(DEMOS_DIR, demo, "run.py")
+    else: 
+        continue
+    with open(demo_file) as run_py:
+        demo_code = run_py.read()
+        demo_code = demo_code.replace("# type: ignore", "").replace('if __name__ == "__main__":\n    ', "")
+    SYSTEM_PROMPT += f"Name: {demo.replace('_', ' ')}\n"
+    SYSTEM_PROMPT += "Code: \n\n"
+    SYSTEM_PROMPT += f"{demo_code}\n\n"
+
+for demo in important_demos_8k:
+    if os.path.exists(os.path.join(DEMOS_DIR, demo, "run.py")):
+        demo_file = os.path.join(DEMOS_DIR, demo, "run.py")
+    else: 
+        continue
+    with open(demo_file) as run_py:
+        demo_code = run_py.read()
+        demo_code = demo_code.replace("# type: ignore", "").replace('if __name__ == "__main__":\n    ', "")
+    SYSTEM_PROMPT_8K += f"Name: {demo.replace('_', ' ')}\n"
+    SYSTEM_PROMPT_8K += "Code: \n\n"
+    SYSTEM_PROMPT_8K += f"{demo_code}\n\n"
+
+
+SYSTEM_PROMPT += """
+
+The following RULES must be followed.  Whenever you are forming a response, after each sentence ensure all rules have been followed otherwise start over, forming a new response and repeat until the finished response follows all the rules.  then send the response.
+
+RULES: 
+Only respond with code, not text.
+Only respond with valid Python syntax.
+Never include backticks in your response such as ``` or ```python. 
+Never use any external library aside from: gradio, numpy, pandas, plotly, transformers_js and matplotlib.
+Do not include any code that is not necessary for the app to run.
+Respond with a full Gradio app. 
+Only respond with one full Gradio app.
+Add comments explaining the code, but do not include any text that is not formatted as a Python comment.
+"""
+
+SYSTEM_PROMPT_8K += """
+
+The following RULES must be followed.  Whenever you are forming a response, after each sentence ensure all rules have been followed otherwise start over, forming a new response and repeat until the finished response follows all the rules.  then send the response.
+
+RULES: 
+Only respond with code, not text.
+Only respond with valid Python syntax.
+Never include backticks in your response such as ``` or ```python. 
+Never use any external library aside from: gradio, numpy, pandas, plotly, transformers_js and matplotlib.
+Do not include any code that is not necessary for the app to run.
+Respond with a full Gradio app. 
+Only respond with one full Gradio app.
+Add comments explaining the code, but do not include any text that is not formatted as a Python comment.
+"""
+
+
 def generate(json_path):
     with open(json_path, "w+") as f:
-        json.dump(docs, f)
+        json.dump(docs, f)
+    return  SYSTEM_PROMPT, SYSTEM_PROMPT_8K

js/_website/package.json

@@ -31,6 +31,6 @@
 		"mdsvex": "^0.11.0",
 		"postcss": "^8.4.27",
 		"prism-svelte": "^0.5.0",
-		"wrangler": "^3.72.3"
+		"wrangler": "^3.73.0"
 	}
 }

js/_website/src/lib/components/Demos.svelte

@@ -4,14 +4,13 @@
 	export let highlighted_code: string;
 	export let url_version: string;
 
+	import WHEEL from "$lib/json/wheel.json";
+
 	$: url_version;
 </script>
 
 <svelte:head>
-	<link
-		rel="stylesheet"
-		href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css"
-	/>
+	<link rel="stylesheet" href="{WHEEL.gradio_lite_url}/dist/lite.css" />
 </svelte:head>
 
 <div class="hidden lg:block py-2 max-h-[750px] overflow-y-scroll">