Remove credentials field for 100% secure server-side key loading

app.py

@@ -15,26 +15,25 @@ os.makedirs("static", exist_ok=True)
 @app.api(name="chat_with_step")
 def chat_with_step(
     messages_json: str,
-    api_key: str,
     reasoning_effort: str = "medium",
     max_tokens: int = 2048,
     temperature: float = 0.7
 ) -> str:
     """
     API endpoint to call Step 3.7 Flash model via OpenAI-compatible API.
-    Takes conversation messages as a JSON-serialized string, API Key, and parameters.
+    Takes conversation messages as a JSON-serialized string, and parameters.
     Returns the assistant response along with any reasoning details.
     """
     try:
         # Load messages from JSON string
         messages = json.loads(messages_json)
         
-        # Use user-supplied key or fallback to server environment variable
-        key = api_key.strip() if api_key and api_key.strip() else os.environ.get("STEP_API_KEY", "")
+        # Load key from secure server-side environment variable
+        key = os.environ.get("STEP_API_KEY", "").strip()
         if not key:
             return json.dumps({
                 "status": "error",
-                "message": "StepFun API Key is required. Please enter your API Key in the settings sidebar."
+                "message": "STEP_API_KEY environment variable is not configured on the server."
             })
             
         # Initialize OpenAI client configured for StepFun

static/app.js

@@ -2,7 +2,6 @@ import { client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.m
 
 // Global Application State Management
 const STATE = {
-    apiKey: localStorage.getItem("step_api_key") || "",
     reasoningEffort: "medium",
     maxTokens: 2048,
     temperature: 0.7,
@@ -14,8 +13,6 @@ const STATE = {
 
 // DOM Elements hooks
 const dom = {
-    apiKeyInput: document.getElementById("api-key-input"),
-    toggleKeyVisibility: document.getElementById("toggle-key-visibility"),
     effortRadioButtons: document.querySelectorAll('input[name="reasoning-effort"]'),
     maxTokensSlider: document.getElementById("max-tokens-slider"),
     maxTokensVal: document.getElementById("max-tokens-val"),
@@ -71,12 +68,7 @@ marked.setOptions({
 
 // Setup Initial State & Event Handlers
 async function initializeApp() {
-    // 1. Restore Credentials
-    if (STATE.apiKey && dom.apiKeyInput) {
-        dom.apiKeyInput.value = STATE.apiKey;
-    }
-
-    // 2. Connect Gradio Client in background (Non-blocking)
+    // 1. Connect Gradio Client in background (Non-blocking)
     client(window.location.origin)
         .then(app => {
             STATE.gradioClient = app;
@@ -86,27 +78,12 @@ async function initializeApp() {
             console.error("Gradio Client Connection Failed:", e);
         });
 
-    // 3. Register Sidebar Drawer Slide Events (Drawer + Overlay)
+    // 2. Register Sidebar Drawer Slide Events (Drawer + Overlay)
     if (dom.btnToggleRight) dom.btnToggleRight.addEventListener("click", () => toggleSettingsDrawer(true));
     if (dom.btnCloseDrawer) dom.btnCloseDrawer.addEventListener("click", () => toggleSettingsDrawer(false));
     if (dom.sidebarOverlay) dom.sidebarOverlay.addEventListener("click", () => toggleSettingsDrawer(false));
 
-    // 4. Register Settings Listeners
-    if (dom.apiKeyInput) {
-        dom.apiKeyInput.addEventListener("input", (e) => {
-            STATE.apiKey = e.target.value;
-            localStorage.setItem("step_api_key", STATE.apiKey);
-        });
-    }
-
-    if (dom.toggleKeyVisibility) {
-        dom.toggleKeyVisibility.addEventListener("click", () => {
-            if (dom.apiKeyInput) {
-                const type = dom.apiKeyInput.type === "password" ? "text" : "password";
-                dom.apiKeyInput.type = type;
-            }
-        });
-    }
+    // 3. Register Settings Listeners
 
     if (dom.effortRadioButtons) {
         dom.effortRadioButtons.forEach(radio => {
@@ -370,13 +347,6 @@ async function triggerPromptSubmission(inputElement) {
     const promptText = inputElement.value.trim();
     if (!promptText && STATE.uploadedFiles.length === 0) return;
 
-    // Check credentials
-    if (!STATE.apiKey && !dom.apiKeyInput.placeholder.includes("server env")) {
-        appendSystemLog("StepFun API Key is required. Please set it in the settings card drawer.", true);
-        toggleSettingsDrawer(true);
-        return;
-    }
-
     setLoadingState(true);
 
     // 1. Format user message contents
@@ -445,7 +415,6 @@ async function triggerPromptSubmission(inputElement) {
         // Call our gradio.Server api endpoint using named object parameters matching Python arguments
         const result = await STATE.gradioClient.predict("/chat_with_step", {
             messages_json: JSON.stringify(STATE.conversationHistory),
-            api_key: STATE.apiKey,
             reasoning_effort: STATE.reasoningEffort,
             max_tokens: STATE.maxTokens,
             temperature: STATE.temperature

static/index.html

@@ -125,18 +125,7 @@
             </div>
 
             <div class="sidebar-right-content">
-                <!-- Credentials -->
-                <div class="right-block-card">
-                    <div class="card-block-header">
-                        <span class="block-title">Credentials</span>
-                    </div>
-                    <div class="password-wrapper">
-                        <input type="password" id="api-key-input" placeholder="Enter key or use server env..." autocomplete="off">
-                        <button type="button" id="toggle-key-visibility" class="visibility-toggle" title="Show/Hide">
-                            <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
-                        </button>
-                    </div>
-                </div>
+
 
                 <!-- Reasoning mode -->
                 <div class="right-block-card">