Update index.html

Add OpenAI agent code

index.html

@@ -1,57 +1,61 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>Gradio-Lite: Serverless Gradio Running Entirely in Your Browser</title>
-        <meta name="description" content="Gradio-Lite: Serverless Gradio Running Entirely in Your Browser">
-
-        <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
-
-        <style>
-            html, body {
-                margin: 0;
-                padding: 0;
-                height: 100%;
-            }
-        </style>
-    </head>
-    <body>
-        <gradio-lite>
-            <gradio-file name="app.py" entrypoint>
-import gradio as gr
-
-from filters import as_gray
-
-def process(input_image):
-    output_image = as_gray(input_image)
-    return output_image
-
-demo = gr.Interface(
-    process,
-    "image",
-    "image",
-    examples=["lion.jpg", "logo.png"],
-)
-
-demo.launch()
-            </gradio-file>
-
-            <gradio-file name="filters.py">
-from skimage.color import rgb2gray
-
-def as_gray(image):
-    return rgb2gray(image)
-            </gradio-file>
-
-            <gradio-file name="lion.jpg" url="https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/test_data/lion.jpg" />
-            <gradio-file name="logo.png" url="https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png" />
-
-            <gradio-requirements>
-# Same syntax as requirements.txt
-scikit-image
-            </gradio-requirements>
-        </gradio-lite>
-    </body>
+<head>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@gradio/lite@5/dist/lite.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite@5/dist/lite.css" />
+</head>
+<body>
+    <gradio-app requirements="openai">
+    import gradio as gr
+    from openai import OpenAI
+
+    def run_descriptor_agent(openai_key, user_prompt):
+        if not openai_key:
+            return "Please enter your OpenAI API Key first!"
+        
+        try:
+            # Initialize the OpenAI client inside the browser-lite environment
+            client = OpenAI(api_key=openai_key)
+            
+            # Simple agent/LLM descriptor call
+            response = client.chat.completions.create(
+                model="gpt-4o-mini",
+                messages=[
+                    {"role": "system", "content": "You are a professional AI Descriptor agent. Provide structured, clear summaries and descriptions based on user requests."},
+                    {"role": "user", "content": user_prompt}
+                ]
+            )
+            return response.choices[0].message.content
+        except Exception as e:
+            return f"Error: {str(e)}"
+
+    # Define a clean Gradio Blocks Interface
+    with gr.Blocks() as demo:
+        gr.Markdown("# AI Descriptor Agent")
+        
+        with gr.Row():
+            key_input = gr.Textbox(
+                label="1. Enter your OpenAI API Key", 
+                placeholder="sk-proj-...", 
+                type="password"
+            )
+            
+        with gr.Row():
+            prompt_input = gr.Textbox(
+                label="2. Ask the Agent anything", 
+                placeholder="Describe what you want me to analyze..."
+            )
+            
+        submit_btn = gr.Button("Run Agent", variant="primary")
+        output_text = gr.Textbox(label="Agent Response", interactive=False)
+        
+        submit_btn.click(
+            fn=run_descriptor_agent, 
+            inputs=[key_input, prompt_input], 
+            outputs=output_text
+        )
+
+    demo.launch()
+    </gradio-app>
+</body>
 </html>