update openai key management

main.py

@@ -85,6 +85,7 @@ class OptimizationRequest(BaseModel):
     image_data: str
     suggestions: List[str]
     request_model_id: str = 'gpt-image-1'
+    openai_key: str = ''
 
 class CaseStudyRequest(BaseModel):
     user_input: str
@@ -249,7 +250,8 @@ async def optimize_design(request: OptimizationRequest, client_ip: str = None):
         response = await call_openai_image_api(
             image_data=image_data,
             prompt=prompt,
-            request_model_id=request.request_model_id
+            request_model_id=request.request_model_id,
+            openai_key=request.openai_key
         )
         
         return JSONResponse(response)
@@ -392,7 +394,7 @@ async def call_openai_api(system_prompt: str, user_content: List[Dict], request_
                 raise HTTPException(status_code=response.status, detail=f"OpenAI API调用失败, response: {resp}")
             return await response.json()
 
-async def call_openai_image_api(image_data: str, prompt: str, request_model_id='gpt-image-1'):
+async def call_openai_image_api(image_data: str, prompt: str, request_model_id='gpt-image-1', openai_key=''):
     try:
         # 从base64字符串中提取纯base64数据（如果包含前缀）
         if image_data and 'base64,' in image_data:
@@ -420,7 +422,7 @@ async def call_openai_image_api(image_data: str, prompt: str, request_model_id='
         image_file.name = "original-design.png"  # 设置文件名，与JS代码一致
         
         # 创建OpenAI客户端
-        client = OpenAI(api_key=OPENAI_API_IMAGE_EDIT_KEY)
+        client = OpenAI(api_key=openai_key if openai_key else OPENAI_API_IMAGE_EDIT_KEY)
         
         # 调用图像编辑API
         response = client.images.edit(

static/script.js

@@ -703,7 +703,8 @@ document.addEventListener('DOMContentLoaded', function() {
                     text: uploadedText,
                     image_data: uploadedImage,
                     suggestions: suggestions,
-                    request_model_id: 'gpt-image-1'
+                    request_model_id: 'gpt-image-1',
+                    openai_key: sessionStorage.getItem('userOpenaiKey') || ''
                 })
             });
 
@@ -774,12 +775,14 @@ document.addEventListener('DOMContentLoaded', function() {
                     text: uploadedText,
                     image_data: uploadedImage,
                     suggestions: suggestions,
-                    request_model_id: 'dall-e-2'
+                    request_model_id: 'dall-e-2',
+                    openai_key: sessionStorage.getItem('userOpenaiKey') || ''
                 })
             });
-
-            if (!response.ok) {
-                throw new Error('优化请求失败');
+            if (response.status === 503) {
+                const errData = await response.json();
+                alert(errData.detail)
+                throw new Error('用户无生图权限')
             }
 
             const data = await response.json();
@@ -942,4 +945,52 @@ document.addEventListener('DOMContentLoaded', function() {
             return imageUrl; // 如果失败，返回原始URL
         }
     }
+
+    // API Key Dialog functionality
+    const apiKeyLink = document.getElementById('apiKeyLink');
+    const apiKeyDialog = document.getElementById('apiKeyDialog');
+    const apiKeyInput = document.getElementById('apiKeyInput');
+    const saveApiKey = document.getElementById('saveApiKey');
+    const cancelApiKey = document.getElementById('cancelApiKey');
+
+    if (apiKeyLink && apiKeyDialog) {
+        // Show dialog when clicking the link
+        apiKeyLink.addEventListener('click', function(e) {
+            e.preventDefault();
+            apiKeyDialog.style.display = 'flex';
+            // Load existing key if available
+            const existingKey = sessionStorage.getItem('userOpenaiKey');
+            if (existingKey) {
+                apiKeyInput.value = existingKey;
+            }
+        });
+
+        // Save API Key
+        saveApiKey.addEventListener('click', function() {
+            const key = apiKeyInput.value.trim();
+            if (key) {
+                sessionStorage.setItem('userOpenaiKey', key);
+                apiKeyDialog.style.display = 'none';
+                // Show success message
+                const toast = document.getElementById('toast');
+                toast.textContent = 'API Key已保存';
+                toast.style.display = 'block';
+                setTimeout(() => {
+                    toast.style.display = 'none';
+                }, 2000);
+            }
+        });
+
+        // Cancel button
+        cancelApiKey.addEventListener('click', function() {
+            apiKeyDialog.style.display = 'none';
+        });
+
+        // Close dialog when clicking outside
+        apiKeyDialog.addEventListener('click', function(e) {
+            if (e.target === apiKeyDialog) {
+                apiKeyDialog.style.display = 'none';
+            }
+        });
+    }
 }); 

static/styles.css

@@ -924,4 +924,117 @@ footer {
 
 @keyframes spin {
     to { transform: rotate(360deg); }
+}
+
+/* API Key Link */
+.api-key-link {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.api-key-link a {
+    color: #9747FF;
+    font-size: 14px;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.api-key-link a:hover {
+    color: #b26bff;
+}
+
+/* API Key Dialog */
+.api-key-dialog {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+}
+
+.dialog-content {
+    background: #1a1a1a;
+    padding: 30px;
+    border-radius: 20px;
+    width: 90%;
+    max-width: 400px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.dialog-content h3 {
+    margin: 0 0 15px 0;
+    color: #fff;
+    font-size: 20px;
+}
+
+.dialog-description {
+    color: #ccc;
+    margin-bottom: 15px;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.dialog-help {
+    margin-bottom: 20px;
+}
+
+.dialog-help a {
+    color: #9747FF;
+    font-size: 14px;
+    text-decoration: none;
+}
+
+.dialog-help a:hover {
+    text-decoration: underline;
+}
+
+#apiKeyInput {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.05);
+    color: #fff;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+
+.dialog-buttons {
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+}
+
+.dialog-buttons button {
+    padding: 8px 20px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.3s ease;
+}
+
+#saveApiKey {
+    background: linear-gradient(to right, #5E33F1, #BA9EF7);
+    color: white;
+}
+
+#saveApiKey:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(94, 51, 241, 0.3);
+}
+
+#cancelApiKey {
+    background: rgba(255, 255, 255, 0.1);
+    color: #ccc;
+}
+
+#cancelApiKey:hover {
+    background: rgba(255, 255, 255, 0.2);
 }