Use Box wrapper and ID selector for more precise CSS targeting

app.py

@@ -1,132 +1,165 @@
 import gradio as gr
-import time
 import base64
 from openai import OpenAI
-import os
-from io import BytesIO
 from PIL import Image
-import re
+import io
+import os
+import time
+import traceback
 
-# 配置
+# API配置
 BASE_URL = "https://api.stepfun.com/v1"
-STEP_API_KEY = os.environ.get("STEP_API_KEY", "")
+STEP_API_KEY = os.environ.get("STEP_API_KEY", "5GTbxYn2RDN9qmm3Y2T2yhuzlJNrNj65y0W9dVVNrOUmD7eLB3aJ2NDXGyyl2Yccq")
 
-def image_to_base64(image):
-    """将图像转换为base64字符串"""
-    if image is None:
+print(f"[DEBUG] Starting app with API key: {'Set' if STEP_API_KEY else 'Not set'}")
+print(f"[DEBUG] Base URL: {BASE_URL}")
+
+def image_to_base64(image_path):
+    """将图片文件转换为base64字符串"""
+    try:
+        with Image.open(image_path) as img:
+            # 如果是RGBA，转换为RGB
+            if img.mode == 'RGBA':
+                rgb_img = Image.new('RGB', img.size, (255, 255, 255))
+                rgb_img.paste(img, mask=img.split()[3])
+                img = rgb_img
+            
+            # 转换为字节流
+            buffered = io.BytesIO()
+            img.save(buffered, format="JPEG", quality=95)
+            return base64.b64encode(buffered.getvalue()).decode('utf-8')
+    except Exception as e:
+        print(f"[ERROR] Failed to convert image: {e}")
         return None
-    
-    if isinstance(image, Image.Image):
-        buffered = BytesIO()
-        image.save(buffered, format="PNG")
-        img_str = base64.b64encode(buffered.getvalue()).decode('utf-8')
-        return img_str
-    elif isinstance(image, str) and os.path.exists(image):
-        with open(image, "rb") as image_file:
-            return base64.b64encode(image_file.read()).decode('utf-8')
-    
-    return None
 
-def process_message(message, history, images, system_prompt, temperature, max_tokens, top_p):
-    """处理消息并生成响应，支持可选的多图片输入"""
-    print(f"[DEBUG] Processing message: {message[:100] if message else 'None'}...")
-    print(f"[DEBUG] Has images: {images is not None and len(images) > 0 if images else False}")
-    
+def user_submit(message, history, images):
+    """处理用户提交"""
     if not message and not images:
-        print("[DEBUG] No message or images provided, skipping")
-        yield history
-        return
+        return message, history, images, "", None
     
-    if not STEP_API_KEY:
-        print("[DEBUG] No API key configured")
-        error_msg = "❌ API key not configured. Please add STEP_API_KEY in Settings."
-        if images and message:
-            display_msg = f"[{len(images)} Images] {message}"
-        elif images:
-            display_msg = f"[{len(images)} Images]"
+    # 创建用户消息显示
+    display_message = message if message else ""
+    if images:
+        # 显示上传的图片数量
+        if isinstance(images, list):
+            num_images = len(images)
+            image_text = f"[{num_images} Image{'s' if num_images > 1 else ''}]"
         else:
-            display_msg = message
-        history.append([display_msg, error_msg])
-        yield history
-        return
+            image_text = "[1 Image]"
+        display_message = f"{image_text} {display_message}" if display_message else image_text
     
-    # 处理多张图片
-    image_contents = []
-    if images:
-        for img_path in images:
-            try:
-                # 获取文件路径
-                if hasattr(img_path, 'name'):
-                    img_file = img_path.name
-                else:
-                    img_file = img_path
-                
-                # 转换图片为base64
-                with Image.open(img_file) as img:
-                    image_content = image_to_base64(img)
-                    if image_content:
-                        image_contents.append(image_content)
-                        print(f"[DEBUG] Image {len(image_contents)} processed successfully")
-            except Exception as e:
-                print(f"[DEBUG] Failed to process image: {e}")
-                history.append([message or f"[{len(images)} Images]", f"❌ Failed to process image: {str(e)}"])
-                yield history
-                return
+    history = history + [[display_message, None]]
     
-    # 构造显示消息
-    text_content = message or ""
-    if image_contents and message:
-        display_message = f"🖼️ [{len(image_contents)} Image{'s' if len(image_contents) > 1 else ''}] {message}"
-    elif image_contents:
-        display_message = f"🖼️ [{len(image_contents)} Image{'s' if len(image_contents) > 1 else ''}]"
+    # 返回清空的输入框、更新的历史、清空的图片，以及保存的消息和图片
+    return "", history, None, message, images
+
+def bot_response(history, saved_message, saved_images, system_prompt, temperature, max_tokens, top_p):
+    """生成机器人回复"""
+    if saved_message or saved_images:
+        # 调用process_message并流式返回结果
+        for updated_history in process_message(
+            saved_message, 
+            history, 
+            saved_images,
+            system_prompt, 
+            temperature, 
+            max_tokens, 
+            top_p
+        ):
+            yield updated_history
     else:
-        display_message = message
-    
-    # 添加到历史
-    history.append([display_message, ""])
-    yield history
-    
-    # 构建API消息
-    messages = []
+        yield history
+
+def process_message(message, history, images, system_prompt, temperature, max_tokens, top_p):
+    """处理消息并调用Step-3 API"""
     
-    # 添加系统提示词
-    if system_prompt:
-        messages.append({"role": "system", "content": system_prompt})
+    print(f"[DEBUG] Processing message: {message[:100] if message else 'None'}")
+    print(f"[DEBUG] Has images: {images is not None}")
+    print(f"[DEBUG] Images type: {type(images)}")
+    if images:
+        print(f"[DEBUG] Images content: {images}")
     
-    # 添加历史对话
-    for h in history[:-1]:
-        if h[0]:
-            # 用户消息 - 移除图片标签
-            user_text = re.sub(r'<img[^>]+>', '', h[0]).strip()
-            if user_text:
-                messages.append({"role": "user", "content": user_text})
-        if h[1] and not h[1].startswith("❌"):
-            messages.append({"role": "assistant", "content": h[1]})
+    if not message and not images:
+        history[-1][1] = "Please provide a message or image."
+        yield history
+        return
     
-    # 添加当前消息
-    if image_contents:
-        current_content = []
-        # 添加所有图片
-        for img_base64 in image_contents:
-            current_content.append({
-                "type": "image_url", 
-                "image_url": {"url": f"data:image/jpg;base64,{img_base64}", "detail": "high"}
-            })
-        # 添加文本
-        if text_content:
-            current_content.append({"type": "text", "text": text_content})
-        messages.append({"role": "user", "content": current_content})
-    else:
-        messages.append({"role": "user", "content": text_content})
+    # 确保历史记录中有用户消息
+    if not history or history[-1][1] is not None:
+        display_message = message if message else ""
+        if images:
+            if isinstance(images, list):
+                num_images = len(images)
+                image_text = f"[{num_images} Image{'s' if num_images > 1 else ''}]"
+            else:
+                image_text = "[1 Image]"
+            display_message = f"{image_text} {display_message}" if display_message else image_text
+        history.append([display_message, None])
     
-    print(f"[DEBUG] Sending {len(messages)} messages to API")
-    print(f"[DEBUG] Last message: {messages[-1]}")
+    # 开始生成回复
+    history[-1][1] = "🤔 Thinking..."
+    yield history
     
-    # 创建客户端并调用API
     try:
-        # 清除所有可能的代理环境变量
+        # 构建消息内容
+        content = []
+        
+        # 处理图片（支持多图）
+        if images:
+            # 确保images是列表
+            image_list = images if isinstance(images, list) else [images]
+            
+            for image_path in image_list:
+                if image_path:
+                    print(f"[DEBUG] Processing image: {image_path}")
+                    base64_image = image_to_base64(image_path)
+                    if base64_image:
+                        content.append({
+                            "type": "image_url",
+                            "image_url": {
+                                "url": f"data:image/jpeg;base64,{base64_image}",
+                                "detail": "high"
+                            }
+                        })
+                        print(f"[DEBUG] Successfully added image to content")
+                    else:
+                        print(f"[ERROR] Failed to convert image: {image_path}")
+        
+        # 添加文本消息
+        if message:
+            content.append({
+                "type": "text",
+                "text": message
+            })
+            print(f"[DEBUG] Added text to content: {message[:100]}")
+        
+        if not content:
+            history[-1][1] = "❌ No valid input provided."
+            yield history
+            return
+        
+        # 构造API消息
+        messages = []
+        
+        # 添加系统提示（如果有）
+        if system_prompt:
+            messages.append({"role": "system", "content": system_prompt})
+        
+        # 只使用用户消息内容，不包括之前的历史
+        messages.append({
+            "role": "user",
+            "content": content
+        })
+        
+        print(f"[DEBUG] Prepared {len(messages)} messages for API")
+        print(f"[DEBUG] Message structure: {[{'role': m['role'], 'content_types': [c.get('type', 'text') for c in m['content']] if isinstance(m['content'], list) else 'text'} for m in messages]}")
+        
+        # 处理代理问题 - 确保删除所有代理相关���环境变量
         import os
-        proxy_vars = ['HTTP_PROXY', 'HTTPS_PROXY', 'http_proxy', 'https_proxy', 
+        import httpx
+        
+        # 删除所有可能的代理环境变量
+        proxy_vars = ['HTTP_PROXY', 'HTTPS_PROXY', 'http_proxy', 'https_proxy',
                       'ALL_PROXY', 'all_proxy', 'NO_PROXY', 'no_proxy']
         for var in proxy_vars:
             if var in os.environ:
@@ -136,16 +169,18 @@ def process_message(message, history, images, system_prompt, temperature, max_to
         # 尝试创建客户端
         try:
             # 方法1：直接创建
-            client = OpenAI(api_key=STEP_API_KEY, base_url=BASE_URL)
+            client = OpenAI(
+                api_key=STEP_API_KEY,
+                base_url=BASE_URL
+            )
             print("[DEBUG] Client created successfully (method 1)")
         except TypeError as e:
             if 'proxies' in str(e):
                 print(f"[DEBUG] Method 1 failed with proxy error, trying method 2")
-                # 方法2：使用httpx客户端
-                import httpx
+                # 方法2：使用自定义HTTP客户端
                 http_client = httpx.Client(trust_env=False)
                 client = OpenAI(
-                    api_key=STEP_API_KEY, 
+                    api_key=STEP_API_KEY,
                     base_url=BASE_URL,
                     http_client=http_client
                 )
@@ -153,7 +188,9 @@ def process_message(message, history, images, system_prompt, temperature, max_to
             else:
                 raise e
         
-        print("[DEBUG] Calling API...")
+        print(f"[DEBUG] Making API call to {BASE_URL}")
+        
+        # 调用API
         response = client.chat.completions.create(
             model="step-3",
             messages=messages,
@@ -163,122 +200,127 @@ def process_message(message, history, images, system_prompt, temperature, max_to
             stream=True
         )
         
-        print("[DEBUG] API call successful, processing stream...")
+        print("[DEBUG] API call successful, starting streaming")
         
         # 流式输出
         full_response = ""
-        chunk_count = 0
         in_reasoning = False
         reasoning_content = ""
         final_content = ""
         
         for chunk in response:
-            chunk_count += 1
-            if chunk.choices and len(chunk.choices) > 0:
-                delta = chunk.choices[0].delta
-                if hasattr(delta, 'content') and delta.content:
-                    content = delta.content
-                    full_response += content
+            if chunk.choices and chunk.choices[0].delta:
+                delta_content = chunk.choices[0].delta.content
+                if delta_content:
+                    full_response += delta_content
                     
-                    # 检测 <reasoning> 标签
-                    if '<reasoning>' in content:
+                    # 检测reasoning标签
+                    if '<reasoning>' in full_response and not in_reasoning:
                         in_reasoning = True
-                        # 分割内容
-                        parts = content.split('<reasoning>')
-                        final_content += parts[0]
+                        parts = full_response.split('<reasoning>')
                         if len(parts) > 1:
-                            reasoning_content += parts[1]
-                    elif '</reasoning>' in content:
-                        # 结束推理部分
-                        parts = content.split('</reasoning>')
-                        if parts[0]:
-                            reasoning_content += parts[0]
+                            reasoning_content = parts[1]
+                    
+                    if in_reasoning and '</reasoning>' in full_response:
                         in_reasoning = False
+                        parts = full_response.split('</reasoning>')
                         if len(parts) > 1:
-                            final_content += parts[1]
+                            reasoning_content = parts[0].split('<reasoning>')[-1]
+                            final_content = parts[1]
                     elif in_reasoning:
-                        # 在推理标签内
-                        reasoning_content += content
+                        reasoning_content = full_response.split('<reasoning>')[-1]
+                    elif '</reasoning>' in full_response:
+                        parts = full_response.split('</reasoning>')
+                        if len(parts) > 1:
+                            final_content = parts[1]
                     else:
-                        # 在推理标签外
-                        final_content += content
+                        # 没有reasoning标签的情况
+                        if '<reasoning>' not in full_response:
+                            final_content = full_response
                     
-                    # 实时更新显示
+                    # 格式化显示
                     if reasoning_content and final_content:
-                        # 有推理和最终答案
-                        display_text = f"💭 **Chain of Thought:**\n\n{reasoning_content}\n\n---\n\n📝 **Answer:**\n\n{final_content}"
+                        display_text = f"💭 **Chain of Thought:**\n\n{reasoning_content.strip()}\n\n---\n\n📝 **Answer:**\n\n{final_content.strip()}"
                     elif reasoning_content:
-                        # 只有推理过程
-                        display_text = f"💭 **Chain of Thought:**\n\n{reasoning_content}\n\n---\n\n📝 **Answer:**\n\n*Generating...*"
+                        display_text = f"💭 **Chain of Thought:**\n\n{reasoning_content.strip()}\n\n---\n\n📝 **Answer:**\n\n*Generating...*"
                     else:
-                        # 只有答案或普通回复
                         display_text = full_response
                     
                     history[-1][1] = display_text
-                    
-                    if chunk_count % 5 == 0:
-                        print(f"[DEBUG] Received {chunk_count} chunks, {len(full_response)} chars")
                     yield history
         
-        print(f"[DEBUG] Stream complete. Total chunks: {chunk_count}, Total chars: {len(full_response)}")
-        
         # 最终格式化
-        if reasoning_content:
-            # 如果有推理内容，使用格式化显示
-            final_display = f"💭 **Chain of Thought:**\n\n{reasoning_content}\n\n---\n\n📝 **Answer:**\n\n{final_content.strip()}"
+        if reasoning_content or final_content:
+            final_display = f"💭 **Chain of Thought:**\n\n{reasoning_content.strip()}\n\n---\n\n📝 **Answer:**\n\n{final_content.strip()}"
             history[-1][1] = final_display
-            yield history
+        else:
+            history[-1][1] = full_response
+        
+        print(f"[DEBUG] Streaming completed. Response length: {len(full_response)}")
+        yield history
         
-        if not full_response:
-            print("[DEBUG] No response content received")
-            history[-1][1] = "⚠️ No response received from API"
-            yield history
-            
     except Exception as e:
-        print(f"[DEBUG] API error: {e}")
-        import traceback
+        error_msg = f"❌ Error: {str(e)}"
+        print(f"[ERROR] {error_msg}")
         traceback.print_exc()
         history[-1][1] = f"❌ Error: {str(e)}"
         yield history
 
 # 创建Gradio界面
 css = """
-/* 让文件上传框与文本框高度一致 */
-.compact-file {
+/* 设置Box容器高度 */
+.compact-file-box {
     height: 52px !important;
+    max-height: 52px !important;
+    padding: 0 !important;
+    border: none !important;
+    background: transparent !important;
 }
-.compact-file > div:first-child {
+
+/* 设置File组件高度 */
+#image-upload {
     height: 52px !important;
-    display: flex !important;
-    flex-direction: column !important;
+    max-height: 52px !important;
 }
-.compact-file label {
-    display: none !important;  /* 隐藏标签以节省空间 */
+
+#image-upload > div {
+    height: 52px !important;
+    max-height: 52px !important;
 }
-.compact-file .wrap {
+
+#image-upload .wrap {
     height: 52px !important;
+    max-height: 52px !important;
     padding: 0 !important;
 }
-.compact-file .file-preview {
+
+#image-upload .block {
+    height: 52px !important;
     max-height: 52px !important;
-    overflow-y: auto !important;
-    font-size: 12px !important;
-    padding: 8px !important;
 }
-.compact-file input[type="file"] {
-    height: 52px !important;
+
+/* 文件上传按钮 */
+#image-upload button {
+    height: 48px !important;
+    font-size: 13px !important;
+    padding: 0 16px !important;
+}
+
+/* 文件预览区域 */
+#image-upload .file-preview {
+    max-height: 48px !important;
     font-size: 12px !important;
+    overflow-y: auto !important;
 }
-.compact-file .upload-container {
-    height: 52px !important;
+
+/* 隐藏不必要的元素 */
+#image-upload label {
+    display: none !important;
 }
-/* 确保上传按钮区域也是正确高度 */
-.compact-file .upload-area {
-    height: 52px !important;
+
+/* 文本框样式对齐参考 */
+#message-textbox textarea {
     min-height: 52px !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
 }
 """
 
@@ -289,9 +331,12 @@ with gr.Blocks(title="Step-3", theme=gr.themes.Soft(), css=css) as demo:
     Welcome to Step-3, an advanced multimodal AI assistant by <a href="https://stepfun.com/" target="_blank" style="color: #0969da;">StepFun</a>.
     """)
     
+    # 创建状态变量来保存消息和图片
+    saved_msg = gr.State("")
+    saved_imgs = gr.State([])
+    
     with gr.Row():
         with gr.Column(scale=3):
-            # 聊天界面
             chatbot = gr.Chatbot(
                 height=600,
                 show_label=False,
@@ -313,14 +358,16 @@ with gr.Blocks(title="Step-3", theme=gr.themes.Soft(), css=css) as demo:
                         elem_id="message-textbox"
                     )
                 with gr.Column(scale=2):
-                    image_input = gr.File(
-                        label="Images",
-                        file_count="multiple",
-                        file_types=[".png", ".jpg", ".jpeg", ".gif", ".webp"],
-                        interactive=True,
-                        show_label=False,
-                        elem_classes="compact-file"
-                    )
+                    with gr.Box(elem_classes="compact-file-box"):
+                        image_input = gr.File(
+                            label="Upload Images",
+                            file_count="multiple",
+                            file_types=[".png", ".jpg", ".jpeg", ".gif", ".webp"],
+                            interactive=True,
+                            show_label=False,
+                            elem_classes="compact-file",
+                            elem_id="image-upload"
+                        )
                 with gr.Column(scale=1, min_width=100):
                     submit_btn = gr.Button("Send", variant="primary")
             
@@ -332,90 +379,46 @@ with gr.Blocks(title="Step-3", theme=gr.themes.Soft(), css=css) as demo:
         
         with gr.Column(scale=1):
             # 设置面板
-            with gr.Accordion("⚙️ Settings", open=True):
+            with gr.Accordion("⚙️ Settings", open=False):
                 system_prompt = gr.Textbox(
                     label="System Prompt",
-                    placeholder="You are a helpful assistant...",
-                    lines=3,
-                    value="You are Step-3, a helpful AI assistant created by StepFun."
+                    placeholder="Set a system prompt (optional)",
+                    lines=3
                 )
-                
-                temperature = gr.Slider(
+                temperature_slider = gr.Slider(
                     minimum=0,
-                    maximum=2,
+                    maximum=1,
                     value=0.7,
                     step=0.1,
                     label="Temperature"
                 )
-                
-                max_tokens = gr.Slider(
-                    minimum=1,
-                    maximum=4096,
-                    value=2048,
-                    step=1,
+                max_tokens_slider = gr.Slider(
+                    minimum=100,
+                    maximum=8000,
+                    value=2000,
+                    step=100,
                     label="Max Tokens"
                 )
-                
-                top_p = gr.Slider(
+                top_p_slider = gr.Slider(
                     minimum=0,
                     maximum=1,
                     value=0.95,
-                    step=0.01,
+                    step=0.05,
                     label="Top P"
                 )
-            
-
-    
-    # 事件处理函数
-    def user_submit(message, history, images):
-        """用户提交消息时的处理"""
-        print(f"[DEBUG] user_submit called with message: {message[:50] if message else 'None'}...")
-        print(f"[DEBUG] user_submit called with images: {len(images) if images else 0} files")
-        if message or images:
-            # 清空输入，保存消息和图片用于后续处理
-            return gr.update(value=""), history, gr.update(value=None), message, images
-        return gr.update(value=message), history, gr.update(value=images), message, images
-    
-    def bot_response(history, saved_message, saved_images, system_prompt, temperature, max_tokens, top_p):
-        """生成机器人响应"""
-        print(f"[DEBUG] bot_response called with saved_message: {saved_message[:50] if saved_message else 'None'}...")
-        print(f"[DEBUG] bot_response called with saved_images: {len(saved_images) if saved_images else 0} files")
-        if saved_message or saved_images:
-            # 使用生成器处理消息
-            for updated_history in process_message(saved_message, history, saved_images, system_prompt, temperature, max_tokens, top_p):
-                yield updated_history
-        else:
-            yield history
-    
-    def undo_last(history):
-        if history:
-            return history[:-1]
-        return history
-    
-    def retry_last(history):
-        if history and history[-1][0]:
-            last_message = history[-1][0]
-            new_history = history[:-1]
-            return new_history, last_message
-        return history, ""
     
-    # 创建隐藏的组件来存储消息和图片
-    saved_msg = gr.State("")
-    saved_imgs = gr.State([])
-    
-    # 提交消息 - Enter键
-    msg.submit(
+    # 事件处理
+    submit_event = msg.submit(
         user_submit,
         [msg, chatbot, image_input],
         [msg, chatbot, image_input, saved_msg, saved_imgs],
         queue=False
     ).then(
         bot_response,
-        [chatbot, saved_msg, saved_imgs, system_prompt, temperature, max_tokens, top_p],
+        [chatbot, saved_msg, saved_imgs, system_prompt, temperature_slider, max_tokens_slider, top_p_slider],
         chatbot
     )
     
-    # 提交消息 - Send按钮
     submit_btn.click(
         user_submit,
         [msg, chatbot, image_input],
@@ -423,55 +426,38 @@ with gr.Blocks(title="Step-3", theme=gr.themes.Soft(), css=css) as demo:
         queue=False
     ).then(
         bot_response,
-        [chatbot, saved_msg, saved_imgs, system_prompt, temperature, max_tokens, top_p],
+        [chatbot, saved_msg, saved_imgs, system_prompt, temperature_slider, max_tokens_slider, top_p_slider],
         chatbot
     )
     
-    # 清空对话
-    clear_btn.click(
-        lambda: ([], "", None),
-        None,
-        [chatbot, msg, image_input]
-    )
+    clear_btn.click(lambda: None, None, chatbot, queue=False)
     
-    # 撤销最后一条
     undo_btn.click(
-        undo_last,
+        lambda h: h[:-1] if h else h,
         chatbot,
-        chatbot
+        chatbot,
+        queue=False
     )
     
-    # 重试最后一条
     retry_btn.click(
-        retry_last,
+        lambda h: h[:-1] if h and h[-1][1] is not None else h,
         chatbot,
-        [chatbot, saved_msg]
+        chatbot,
+        queue=False
     ).then(
         bot_response,
-        [chatbot, saved_msg, saved_imgs, system_prompt, temperature, max_tokens, top_p],
+        [chatbot, saved_msg, saved_imgs, system_prompt, temperature_slider, max_tokens_slider, top_p_slider],
         chatbot
     )
-    
-    # 页脚
-    gr.Markdown("""
-    ---
-    <div style="text-align: center; color: #666;">
-        <p>Powered by <a href="https://www.stepfun.com/" target="_blank" style="color: #0969da;">StepFun</a> | 
-        Model: Step-3 | 
-        <a href="https://github.com/stepfun-ai" target="_blank" style="color: #0969da;">GitHub</a></p>
-    </div>
-    """)
 
 # 启动应用
 if __name__ == "__main__":
     print(f"[DEBUG] Starting app with API key: {'Set' if STEP_API_KEY else 'Not set'}")
     print(f"[DEBUG] Base URL: {BASE_URL}")
-    
-    demo.queue(max_size=20)
+    demo.queue(max_size=10)
     demo.launch(
         server_name="0.0.0.0",
         server_port=7860,
         share=False,
-        debug=False,
-        show_error=True
+        debug=False
     )