Update app.py

app.py

@@ -6,12 +6,11 @@ import requests
 from transformers import AutoTokenizer, AutoModelForCausalLM, pipeline
 from dotenv import load_dotenv
 
-# ----------------- Configuração e Secrets -----------------
+# ----------------- Configuração -----------------
 load_dotenv()
 
-HF_TOKEN = os.environ.get("HF_TOKEN")
+HF_TOKEN = os.environ.get("HF_TOKEN")  # Hugging Face Token para gated models
 MODEL_NAME = "google/gemma-3-270m-it"
-
 SUPABASE_URL = os.environ.get("SUPABASE_URL")
 SUPABASE_KEY = os.environ.get("SUPABASE_KEY")
 
@@ -24,7 +23,7 @@ HEADERS = {
     "Content-Type": "application/json"
 }
 
-# ----------------- Modelo -----------------
+# ----------------- Carregar modelo -----------------
 try:
     tokenizer = AutoTokenizer.from_pretrained(MODEL_NAME, use_auth_token=HF_TOKEN)
     model = AutoModelForCausalLM.from_pretrained(MODEL_NAME, use_auth_token=HF_TOKEN, device_map="auto")
@@ -39,7 +38,7 @@ def create_user(name: str):
     if not name.strip():
         return "⚠️ Name cannot be empty.", ""
     api_key = str(uuid.uuid4())
-    data = {"name": name.strip(), "api_key": api_key}
+    data = {"name": name.strip(), "api_key": api_key, "requests": 0}
     try:
         r = requests.post(f"{SUPABASE_URL}/rest/v1/users", headers=HEADERS, data=json.dumps(data))
         r.raise_for_status()
@@ -55,6 +54,31 @@ def check_key(api_key: str) -> bool:
     except:
         return False
 
+def increment_requests(api_key: str):
+    try:
+        r = requests.get(f"{SUPABASE_URL}/rest/v1/users?api_key=eq.{api_key.strip()}", headers=HEADERS)
+        r.raise_for_status()
+        data = r.json()
+        if not data:
+            return
+        user_id = data[0]["id"]
+        requests_count = data[0].get("requests", 0) + 1
+        patch_data = {"requests": requests_count}
+        requests.patch(f"{SUPABASE_URL}/rest/v1/users?id=eq.{user_id}", headers=HEADERS, data=json.dumps(patch_data))
+    except:
+        pass
+
+def get_user_info(api_key: str):
+    try:
+        r = requests.get(f"{SUPABASE_URL}/rest/v1/users?api_key=eq.{api_key.strip()}", headers=HEADERS)
+        r.raise_for_status()
+        data = r.json()
+        if not data:
+            return None
+        return data[0]
+    except:
+        return None
+
 # ----------------- Função de geração -----------------
 def generate_text(prompt: str, api_key: str):
     if gen_pipe is None:
@@ -65,6 +89,7 @@ def generate_text(prompt: str, api_key: str):
         return "⚠️ Prompt cannot be empty."
     try:
         result = gen_pipe(prompt.strip(), max_new_tokens=200, do_sample=True, temperature=0.7, top_k=50, top_p=0.95)
+        increment_requests(api_key)
         return result[0]["generated_text"]
     except Exception as e:
         print(f"❌ Error: {e}")
@@ -72,93 +97,66 @@ def generate_text(prompt: str, api_key: str):
 
 # ----------------- Custom CSS -----------------
 custom_css = """
-body {
-    background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
-    font-family: 'Inter', sans-serif;
-}
-.gradio-container {
-    max-width: 900px !important;
-    margin: auto !important;
-    padding-top: 2rem;
-}
+body {background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%); font-family: 'Inter', sans-serif;}
+.gradio-container {max-width: 1000px !important; margin: auto !important; padding-top: 2rem;}
 footer { display: none !important; }
 
-/* Header */
-#title {
-    text-align: center;
-    font-size: 3rem;
-    font-weight: 700;
-    margin-bottom: 0.2rem;
-    background: linear-gradient(90deg, #4f46e5, #3b82f6);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-#subtitle {
-    text-align: center;
-    color: #334155;
-    font-size: 1.2rem;
-    margin-bottom: 2rem;
-}
+/* Sidebar */
+.sidebar {background: #1e293b; color: white; padding: 1rem; border-radius: 10px;}
+.sidebar label {color: #cbd5e1; font-weight: 600;}
+.sidebar .gr-radio {margin-top: 1rem;}
 
-/* Tabs */
-.tabs > .tab-nav > button {
-    border-radius: 10px 10px 0 0 !important;
-    font-weight: 600;
-    color: #1e293b;
-}
-.tabs > .tab-nav > button.selected {
-    background-color: #ffffff !important;
-    border-bottom: 3px solid #3b82f6 !important;
-    color: #1d4ed8 !important;
-}
+/* Header */
+#title {text-align: center; font-size: 3rem; font-weight: 700; margin-bottom:0.2rem; background: linear-gradient(90deg,#4f46e5,#3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
+#subtitle {text-align: center; color:#334155; font-size:1.2rem; margin-bottom:2rem;}
 
-/* Inputs and Buttons */
-.gr-button, .gr-input, .gr-textbox {
-    border-radius: 12px !important;
-    transition: all 0.2s ease;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
-}
-.gr-button {
-    background: linear-gradient(90deg, #4f46e5, #3b82f6) !important;
-    color: white !important;
-    font-weight: 600;
-}
-.gr-button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
-}
-.gr-input:focus, .gr-textbox textarea:focus {
-    border-color: #3b82f6 !important;
-    box-shadow: 0 0 0 3px rgba(59,130,246,0.2) !important;
-}
+/* Buttons */
+.gr-button {border-radius:12px !important; background: linear-gradient(90deg,#4f46e5,#3b82f6) !important; color:white !important; font-weight:600;}
+.gr-button:hover {transform: translateY(-2px); box-shadow:0 6px 12px rgba(0,0,0,0.15);}
+.gr-input:focus, .gr-textbox textarea:focus {border-color:#3b82f6 !important; box-shadow:0 0 0 3px rgba(59,130,246,0.2) !important;}
 """
 
 # ----------------- Interface Gradio -----------------
-with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
+with gr.Blocks(css=custom_css) as app:
+    # Header
     gr.Markdown("<h1 id='title'>✨ Gemma 270M API</h1>", elem_id="title")
-    gr.Markdown("<p id='subtitle'>Generate text with Google's Gemma model using your API key.</p>", elem_id="subtitle")
-
-    with gr.Tabs():
-        with gr.TabItem("📝 Generate Text"):
-            gr.Markdown("### Enter your prompt and API key to generate text.")
-            api_input = gr.Textbox(label="🔑 API Key", type="password")
-            prompt_input = gr.Textbox(label="💬 Prompt", lines=5)
-            output_text = gr.Textbox(label="💡 Result", interactive=False, lines=8)
-            with gr.Row():
-                clear_btn = gr.ClearButton(value="Clear", components=[prompt_input, output_text])
-                gen_btn = gr.Button("Generate", variant="primary")
-            gen_btn.click(fn=generate_text, inputs=[prompt_input, api_input], outputs=output_text)
-
-        with gr.TabItem("🔐 Create API Key"):
-            gr.Markdown("### Create your personal API key here.")
-            name_input = gr.Textbox(label="👤 Name")
-            status_output = gr.Textbox(label="Status", interactive=False)
-            key_output = gr.Textbox(label="✅ API Key", interactive=False)
-            with gr.Row():
-                clear_btn2 = gr.ClearButton(value="Clear", components=[name_input, status_output, key_output])
-                create_btn = gr.Button("Create", variant="primary")
-            create_btn.click(fn=create_user, inputs=name_input, outputs=[status_output, key_output])
-
-# Launch app
-if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860)
+    gr.Markdown("<p id='subtitle'>Interactive playground with API key management</p>", elem_id="subtitle")
+
+    with gr.Row():
+        # Sidebar
+        with gr.Column(scale=1, min_width=200):
+            gr.Markdown("### Menu")
+            menu_radio = gr.Radio(choices=["Playground", "Profile"], value="Playground", label="", elem_classes=["sidebar"])
+
+        # Main content
+        with gr.Column(scale=4):
+            with gr.Group():
+                # Playground
+                with gr.Tab("Playground"):
+                    with gr.Row():
+                        with gr.Column(scale=2):
+                            gr.Markdown("### Instructions / JSON Examples")
+                            gr.Markdown("```json\n{\n  \"prompt\": \"Write a short story about a robot\",\n  \"api_key\": \"YOUR_API_KEY\"\n}```")
+                        with gr.Column(scale=3):
+                            prompt_input = gr.Textbox(label="💬 Prompt", lines=5)
+                            api_key_input = gr.Textbox(label="🔑 API Key", type="password")
+                            output_text = gr.Textbox(label="💡 Result", interactive=False, lines=8)
+                            with gr.Row():
+                                clear_btn = gr.ClearButton(value="Clear", components=[prompt_input, output_text])
+                                generate_btn = gr.Button("Generate")
+                            generate_btn.click(fn=generate_text, inputs=[prompt_input, api_key_input], outputs=output_text)
+
+                # Profile
+                with gr.Tab("Profile"):
+                    gr.Markdown("### Manage your API Key")
+                    name_input = gr.Textbox(label="👤 Your Name")
+                    status_output = gr.Textbox(label="Status", interactive=False)
+                    key_output = gr.Textbox(label="✅ Your API Key", interactive=False)
+                    request_count_output = gr.Textbox(label="Requests Made", interactive=False)
+                    def create_key_profile(name):
+                        msg, key = create_user(name)
+                        return msg, key, 0
+                    create_btn = gr.Button("Create API Key")
+                    create_btn.click(fn=create_key_profile, inputs=name_input, outputs=[status_output, key_output, request_count_output])
+
+app.launch(server_name="0.0.0.0", server_port=7860)