Update app.py

app.py

@@ -145,86 +145,146 @@ def run_inference_and_analysis(task, system_prompt, input_text, temperature, top
         params
     )
 
-# Gradio interface
 def gradio_interface():
-    with gr.Blocks(theme=gr.themes.Base(), title="Prompt Engineering and LLM Studio") as demo:
-        gr.HTML(
-            """
-            <div style="margin-bottom: 20px;">
-                <img src="https://raw.githubusercontent.com/pixeltable/pixeltable/main/docs/source/data/pixeltable-logo-large.png" alt="Pixeltable" style="max-width: 150px;" />
+    with gr.Blocks(theme=gr.themes.Base(), title="Pixeltable LLM Studio") as demo:
+        # Enhanced Header with Branding
+        gr.HTML("""
+            <div style="text-align: center; padding: 20px; background: linear-gradient(to right, #4F46E5, #7C3AED);" class="shadow-lg">
+                <img src="https://raw.githubusercontent.com/pixeltable/pixeltable/main/docs/source/data/pixeltable-logo-large.png" 
+                     alt="Pixeltable" style="max-width: 200px; margin-bottom: 15px;" />
+                <h1 style="color: white; font-size: 2.5rem; margin-bottom: 10px;">LLM Studio</h1>
+                <p style="color: #E5E7EB; font-size: 1.1rem;">
+                    Powered by Pixeltable's Unified AI Data Infrastructure
+                </p>
             </div>
-            """
-        ) 
-        gr.Markdown(
-            """
-            # Prompt Engineering and LLM Studio
-
-            This application demonstrates how [Pixeltable](https://github.com/pixeltable/pixeltable) can be used for rapid and incremental prompt engineering 
-            and model comparison workflows. It showcases Pixeltable's ability to directly store, version, index, 
-            and transform data while providing an interactive interface to experiment with different prompts and models.
-
-            Remember, effective prompt engineering often requires experimentation and iteration. Use this tool to systematically improve your prompts and understand how different inputs and parameters affect the LLM outputs.
-            """
-        )
+        """)
 
+        # Product Overview Cards
         with gr.Row():
             with gr.Column():
-                with gr.Accordion("What does it do?", open=False):
-                    gr.Markdown(
-                        """
-                        1. **Data Organization**: Pixeltable uses tables and views to organize data, similar to traditional databases but with enhanced capabilities for AI workflows.
-                        2. **Computed Columns**: These are dynamically generated columns based on expressions applied to columns.
-                        3. **Data Storage**: All prompts, responses, and analysis results are stored in Pixeltable tables.
-                        4. **Versioning**: Every operations are automatically versioned, allowing you to track changes over time.
-                        5. **UDFs**: Sentiment scores, keywords, and readability scores are computed dynamically.
-                        6. **Querying**: The history and analysis tabs leverage Pixeltable's querying capabilities to display results.
-                        """
-                    )
-            
-            with gr.Column():
-                with gr.Accordion("How does it work?", open=False):
-                    gr.Markdown(
-                        """
-                        1. **Define your task**: This helps you keep track of different experiments. 
-                        2. **Set up your prompt**: Enter a system prompt in the "System Prompt" field. Write your specific input or question in the "Input Text" field
-                        3. **Adjust parameters (optional)**: Adjust temperature, top_p, token limits, etc., to control the model's output.
-                        4. **Run the analysis**: Click the "Run Inference and Analysis" button.
-                        5. **Review the results**: Compare the responses from both models and exmaine the scores.
-                        6. **Iterate and refine**: Based on the results, refine your prompt or adjust parameters.
-                        """
-                    )
+                gr.HTML("""
+                    <div style="padding: 20px; background-color: white; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin: 10px;">
+                        <h3 style="color: #4F46E5; margin-bottom: 10px;">🚀 Why Pixeltable?</h3>
+                        <ul style="list-style-type: none; padding-left: 0;">
+                            <li style="margin-bottom: 8px;">✨ Unified data management for AI workflows</li>
+                            <li style="margin-bottom: 8px;">📊 Automatic versioning and lineage tracking</li>
+                            <li style="margin-bottom: 8px;">⚡ Seamless model integration and deployment</li>
+                            <li style="margin-bottom: 8px;">🔍 Advanced querying and analysis capabilities</li>
+                        </ul>
+                    </div>
+                """)
 
-        with gr.Row():
             with gr.Column():
-                task = gr.Textbox(label="Task (Arbitrary Category)")
-                system_prompt = gr.Textbox(label="System Prompt")
-                input_text = gr.Textbox(label="Input Text")
+                gr.HTML("""
+                    <div style="padding: 20px; background-color: white; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin: 10px;">
+                        <h3 style="color: #4F46E5; margin-bottom: 10px;">💡 Features</h3>
+                        <ul style="list-style-type: none; padding-left: 0;">
+                            <li style="margin-bottom: 8px;">🔄 Compare multiple LLM models side-by-side</li>
+                            <li style="margin-bottom: 8px;">📈 Track and analyze model performance</li>
+                            <li style="margin-bottom: 8px;">🎯 Experiment with different prompts and parameters</li>
+                            <li style="margin-bottom: 8px;">📝 Automatic analysis with sentiment and readability scores</li>
+                        </ul>
+                    </div>
+                """)
+
+        # Main Interface
+        with gr.Tabs() as tabs:
+            with gr.TabItem("🎯 Experiment", id=0):
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        gr.HTML("""
+                            <div style="padding: 15px; background-color: #F3F4F6; border-radius: 8px; margin-bottom: 15px;">
+                                <h3 style="color: #4F46E5; margin-bottom: 10px;">Experiment Setup</h3>
+                                <p style="color: #6B7280; font-size: 0.9rem;">Configure your prompt engineering experiment below</p>
+                            </div>
+                        """)
+                        
+                        task = gr.Textbox(
+                            label="Task Category",
+                            placeholder="e.g., Sentiment Analysis, Text Generation, Summarization",
+                            elem_classes="input-style"
+                        )
+                        system_prompt = gr.Textbox(
+                            label="System Prompt",
+                            placeholder="Define the AI's role and task...",
+                            lines=3,
+                            elem_classes="input-style"
+                        )
+                        input_text = gr.Textbox(
+                            label="Input Text",
+                            placeholder="Enter your prompt or text to analyze...",
+                            lines=4,
+                            elem_classes="input-style"
+                        )
+
+                        with gr.Accordion("🛠️ Advanced Settings", open=False):
+                            temperature = gr.Slider(minimum=0, maximum=1, value=0.7, step=0.1, label="Temperature")
+                            top_p = gr.Slider(minimum=0, maximum=1, value=0.9, step=0.1, label="Top P")
+                            max_tokens = gr.Number(label="Max Tokens", value=300)
+                            stop = gr.Textbox(label="Stop Sequences (comma-separated)")
+                            random_seed = gr.Number(label="Random Seed", value=None)
+                            safe_prompt = gr.Checkbox(label="Safe Prompt", value=False)
+
+                        submit_btn = gr.Button(
+                            "🚀 Run Analysis",
+                            variant="primary",
+                            scale=1,
+                            min_width=200
+                        )
+
+                    with gr.Column(scale=1):
+                        gr.HTML("""
+                            <div style="padding: 15px; background-color: #F3F4F6; border-radius: 8px; margin-bottom: 15px;">
+                                <h3 style="color: #4F46E5; margin-bottom: 10px;">Results</h3>
+                                <p style="color: #6B7280; font-size: 0.9rem;">Compare model outputs and analysis metrics</p>
+                            </div>
+                        """)
+                        
+                        with gr.Group():
+                            omn_response = gr.Textbox(
+                                label="Open-Mistral-Nemo Response",
+                                elem_classes="output-style"
+                            )
+                            ml_response = gr.Textbox(
+                                label="Mistral-Medium Response",
+                                elem_classes="output-style"
+                            )
 
-                with gr.Accordion("Advanced Settings", open=False):
-                    temperature = gr.Slider(minimum=0, maximum=1, value=0.7, step=0.1, label="Temperature")
-                    top_p = gr.Slider(minimum=0, maximum=1, value=0.9, step=0.1, label="Top P")
-                    max_tokens = gr.Number(label="Max Tokens", value=300)
-                    stop = gr.Textbox(label="Stop Sequences (comma-separated)")
-                    random_seed = gr.Number(label="Random Seed", value=None)
-                    safe_prompt = gr.Checkbox(label="Safe Prompt", value=False)
+                        with gr.Group():
+                            with gr.Row():
+                                with gr.Column():
+                                    gr.HTML("<h4>📊 Sentiment Analysis</h4>")
+                                    large_sentiment = gr.Number(label="Mistral-Medium")
+                                    open_sentiment = gr.Number(label="Open-Mistral-Nemo")
+                                
+                                with gr.Column():
+                                    gr.HTML("<h4>📈 Readability Scores</h4>")
+                                    large_readability = gr.Number(label="Mistral-Medium")
+                                    open_readability = gr.Number(label="Open-Mistral-Nemo")
 
-                submit_btn = gr.Button("Run Inference and Analysis")
+                            gr.HTML("<h4>🔑 Key Terms</h4>")
+                            with gr.Row():
+                                large_keywords = gr.Textbox(label="Mistral-Medium Keywords")
+                                open_keywords = gr.Textbox(label="Open-Mistral-Nemo Keywords")
 
+            with gr.TabItem("📊 History & Analysis", id=1):
                 with gr.Tabs():
-                    with gr.Tab("Prompt Input"):
-                        history = gr.Dataframe(
-                            headers=["Task", "System Prompt", "Input Text", "Timestamp"],
-                            wrap=True
+                    with gr.TabItem("Prompt History"):
+                        history = gr.DataFrame(
+                            headers=["Timestamp", "Task", "System Prompt", "Input Text"],
+                            wrap=True,
+                            elem_classes="table-style"
                         )
                     
-                    with gr.Tab("Model Responses"):
-                        responses = gr.Dataframe(
-                            headers=["Timestamp", "Open-Mistral-Nemo Response", "Mistral-Medium Response"],
-                            wrap=True
+                    with gr.TabItem("Model Responses"):
+                        responses = gr.DataFrame(
+                            headers=["Timestamp", "Open-Mistral-Nemo", "Mistral-Medium"],
+                            wrap=True,
+                            elem_classes="table-style"
                         )
                     
-                    with gr.Tab("Analysis Results"):
-                        analysis = gr.Dataframe(
+                    with gr.TabItem("Analysis Results"):
+                        analysis = gr.DataFrame(
                             headers=[
                                 "Timestamp",
                                 "Open-Mistral-Nemo Sentiment",
@@ -234,74 +294,66 @@ def gradio_interface():
                                 "Open-Mistral-Nemo Readability",
                                 "Mistral-Medium Readability"
                             ],
-                            wrap=True
+                            wrap=True,
+                            elem_classes="table-style"
                         )
-                    
-                    with gr.Tab("Model Parameters"):
-                        params = gr.Dataframe(
-                            headers=[
-                                "Timestamp",
-                                "Temperature",
-                                "Top P",
-                                "Max Tokens",
-                                "Stop Sequences",
-                                "Random Seed",
-                                "Safe Prompt"
-                            ],
-                            wrap=True
-                        )
-            
-            with gr.Column():
-                omn_response = gr.Textbox(label="Open-Mistral-Nemo Response")
-                ml_response = gr.Textbox(label="Mistral-Medium Response")
-                
-                with gr.Row():
-                    large_sentiment = gr.Number(label="Mistral-Medium Sentiment")
-                    open_sentiment = gr.Number(label="Open-Mistral-Nemo Sentiment")
-                
-                with gr.Row():
-                    large_keywords = gr.Textbox(label="Mistral-Medium Keywords")
-                    open_keywords = gr.Textbox(label="Open-Mistral-Nemo Keywords")
-                
-                with gr.Row():
-                    large_readability = gr.Number(label="Mistral-Medium Readability")
-                    open_readability = gr.Number(label="Open-Mistral-Nemo Readability")
 
-        # Define the examples
-        examples = [
-            # Example 1: Sentiment Analysis
-            ["Sentiment Analysis", 
-            "You are an AI trained to analyze the sentiment of text. Provide a detailed analysis of the emotional tone, highlighting key phrases that indicate sentiment.",
-            "The new restaurant downtown exceeded all my expectations. The food was exquisite, the service impeccable, and the ambiance was perfect for a romantic evening. I can't wait to go back!",
-            0.3, 0.95, 200, ""],
-            
-            # Example 2: Creative Writing
-            ["Story Generation",
-            "You are a creative writer. Generate a short, engaging story based on the given prompt. Include vivid descriptions and an unexpected twist.",
-            "In a world where dreams are shared, a young girl discovers she can manipulate other people's dreams.",
-            0.9, 0.8, 500, 300, "The end"]
-                ]
-                    
-        gr.Examples(
-            examples=examples,
-            inputs=[task, system_prompt, input_text, temperature, top_p, max_tokens, stop, random_seed, safe_prompt],
-            outputs=[omn_response, ml_response, large_sentiment, open_sentiment, large_keywords, open_keywords, large_readability, open_readability],
-            fn=run_inference_and_analysis,
-            cache_examples=True,
-        )
+        # Footer with links and additional info
+        gr.HTML("""
+            <div style="text-align: center; padding: 20px; margin-top: 30px; border-top: 1px solid #E5E7EB;">
+                <div style="margin-bottom: 20px;">
+                    <h3 style="color: #4F46E5;">Built with Pixeltable</h3>
+                    <p style="color: #6B7280;">The unified data infrastructure for AI applications</p>
+                </div>
+                <div style="display: flex; justify-content: center; gap: 20px;">
+                    <a href="https://github.com/pixeltable/pixeltable" target="_blank" 
+                       style="color: #4F46E5; text-decoration: none;">
+                        📚 Documentation
+                    </a>
+                    <a href="https://github.com/pixeltable/pixeltable" target="_blank"
+                       style="color: #4F46E5; text-decoration: none;">
+                        💻 GitHub
+                    </a>
+                    <a href="https://join.slack.com/t/pixeltablecommunity/shared_invite/zt-21fybjbn2-fZC_SJiuG6QL~Ai8T6VpFQ" target="_blank"
+                       style="color: #4F46E5; text-decoration: none;">
+                        💬 Community
+                    </a>
+                </div>
+            </div>
+        """)
 
-        gr.Markdown(
-            """
-            For more information, visit [Pixeltable's GitHub repository](https://github.com/pixeltable/pixeltable).
-            """
-        )
-        
+        # Custom CSS
+        gr.HTML("""
+            <style>
+                .input-style {
+                    border: 1px solid #E5E7EB !important;
+                    border-radius: 8px !important;
+                    padding: 12px !important;
+                }
+                .output-style {
+                    background-color: #F9FAFB !important;
+                    border-radius: 8px !important;
+                    padding: 12px !important;
+                }
+                .table-style {
+                    border-collapse: collapse !important;
+                    width: 100% !important;
+                }
+                .table-style th {
+                    background-color: #F3F4F6 !important;
+                    padding: 12px !important;
+                }
+            </style>
+        """)
+
+        # Setup event handlers
         submit_btn.click(
             run_inference_and_analysis,
             inputs=[task, system_prompt, input_text, temperature, top_p, max_tokens, stop, random_seed, safe_prompt],
-            outputs=[omn_response, ml_response, large_sentiment, open_sentiment, large_keywords, open_keywords, large_readability, open_readability, history, responses, analysis, params]
+            outputs=[omn_response, ml_response, large_sentiment, open_sentiment, large_keywords, open_keywords, 
+                    large_readability, open_readability, history, responses, analysis, params]
         )
-    
+
     return demo
 
 # Launch the Gradio interface