Update app.py

app.py

@@ -147,19 +147,28 @@ def clear_conversation():
     """Clear the conversation history."""
     return []
 
+def plt_to_html(fig):
+    """Convert matplotlib figure to HTML img tag"""
+    buf = io.BytesIO()
+    fig.savefig(buf, format="png", bbox_inches="tight")
+    buf.seek(0)
+    img_str = base64.b64encode(buf.read()).decode("utf-8")
+    plt.close(fig)
+    return f'<img src="data:image/png;base64,{img_str}" alt="Chart">'
+
 def generate_analytics():
     """Generate analytics from the chat log"""
     log_file = "analytics/chat_log.json"
     
     if not os.path.exists(log_file):
-        return "No analytics data available yet.", None, None, None, None
+        return "No analytics data available yet.", None, None, None, []
     
     try:
         with open(log_file, "r") as f:
             logs = json.load(f)
         
         if not logs:
-            return "No analytics data available yet.", None, None, None, None
+            return "No analytics data available yet.", None, None, None, []
         
         # Convert to DataFrame
         df = pd.DataFrame(logs)
@@ -172,18 +181,14 @@ def generate_analytics():
         }).reset_index()
         model_usage.columns = ["model", "total_tokens", "request_count"]
         
-        plt.figure(figsize=(10, 6))
+        fig1 = plt.figure(figsize=(10, 6))
         plt.bar(model_usage["model"], model_usage["total_tokens"])
         plt.title("Token Usage by Model")
         plt.xlabel("Model")
         plt.ylabel("Total Tokens Used")
         plt.xticks(rotation=45)
-        
-        model_usage_img = io.BytesIO()
-        plt.savefig(model_usage_img, format="png", bbox_inches="tight")
-        model_usage_img.seek(0)
-        model_usage_b64 = base64.b64encode(model_usage_img.read()).decode("utf-8")
-        plt.close()
+        plt.tight_layout()
+        model_usage_img = plt_to_html(fig1)
         
         # Generate usage over time chart
         df["date"] = df["timestamp"].dt.date
@@ -191,56 +196,55 @@ def generate_analytics():
             "tokens_used": "sum"
         }).reset_index()
         
-        plt.figure(figsize=(10, 6))
+        fig2 = plt.figure(figsize=(10, 6))
         plt.plot(daily_usage["date"], daily_usage["tokens_used"], marker="o")
         plt.title("Daily Token Usage")
         plt.xlabel("Date")
         plt.ylabel("Tokens Used")
         plt.grid(True)
-        
-        daily_usage_img = io.BytesIO()
-        plt.savefig(daily_usage_img, format="png", bbox_inches="tight")
-        daily_usage_img.seek(0)
-        daily_usage_b64 = base64.b64encode(daily_usage_img.read()).decode("utf-8")
-        plt.close()
+        plt.tight_layout()
+        daily_usage_img = plt_to_html(fig2)
         
         # Generate response time chart
         model_response_time = df.groupby("model").agg({
             "response_time_sec": "mean"
         }).reset_index()
         
-        plt.figure(figsize=(10, 6))
+        fig3 = plt.figure(figsize=(10, 6))
         plt.bar(model_response_time["model"], model_response_time["response_time_sec"])
         plt.title("Average Response Time by Model")
         plt.xlabel("Model")
         plt.ylabel("Response Time (seconds)")
         plt.xticks(rotation=45)
-        
-        response_time_img = io.BytesIO()
-        plt.savefig(response_time_img, format="png", bbox_inches="tight")
-        response_time_img.seek(0)
-        response_time_b64 = base64.b64encode(response_time_img.read()).decode("utf-8")
-        plt.close()
+        plt.tight_layout()
+        response_time_img = plt_to_html(fig3)
         
         # Summary statistics
         total_tokens = df["tokens_used"].sum()
         total_requests = len(df)
         avg_response_time = df["response_time_sec"].mean()
         
+        # Handling the case where there might not be enough data
+        if not model_usage.empty:
+            most_used_model = model_usage.iloc[model_usage["request_count"].argmax()]["model"]
+        else:
+            most_used_model = "N/A"
+        
         summary = f"""
         ## Analytics Summary
         
         - **Total API Requests**: {total_requests}
         - **Total Tokens Used**: {total_tokens:,}
         - **Average Response Time**: {avg_response_time:.2f} seconds
-        - **Most Used Model**: {model_usage.iloc[model_usage["request_count"].argmax()]["model"]}
+        - **Most Used Model**: {most_used_model}
         - **Date Range**: {df["timestamp"].min().date()} to {df["timestamp"].max().date()}
         """
         
-        return summary, model_usage_b64, daily_usage_b64, response_time_b64, df.to_dict("records")
+        return summary, model_usage_img, daily_usage_img, response_time_img, df.to_dict("records")
     
     except Exception as e:
-        return f"Error generating analytics: {str(e)}", None, None, None, None
+        error_message = f"Error generating analytics: {str(e)}"
+        return error_message, None, None, None, []
 
 # Define available models
 models = [
@@ -366,11 +370,11 @@ with gr.Blocks(title="Groq AI Chat Playground") as app:
                 
                 with gr.Row():
                     with gr.Column():
-                        model_usage_chart = gr.Image(label="Token Usage by Model")
+                        model_usage_chart = gr.HTML(label="Token Usage by Model")
                     with gr.Column():
-                        daily_usage_chart = gr.Image(label="Daily Token Usage")
+                        daily_usage_chart = gr.HTML(label="Daily Token Usage")
                 
-                response_time_chart = gr.Image(label="Response Time by Model")
+                response_time_chart = gr.HTML(label="Response Time by Model")
                 
                 with gr.Accordion("Raw Data", open=False):
                     analytics_table = gr.DataFrame(label="Raw Analytics Data")