add flask

.dockerignore

@@ -0,0 +1,51 @@
+# Git
+.git
+.gitignore
+.gitattributes
+
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+env/
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# Environments
+# 不排除.env文件，Docker构建时需要
+# .env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# 应用特定
+*.log
+uploads/*
+!uploads/.gitkeep
+
+# Docker
+Dockerfile
+.dockerignore 

.gitignore

@@ -0,0 +1,47 @@
+# 环境变量
+.env
+
+# 上传的文件
+static/uploads/
+!static/uploads/.gitkeep
+
+# Python 缓存文件
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# 虚拟环境
+.venv/
+venv/
+ENV/
+env/
+
+# IDE 文件
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# Docker 相关
+.dockerignore
+
+# 其他
+.DS_Store
+Thumbs.db

Dockerfile

@@ -0,0 +1,59 @@
+FROM python:3.9-slim
+
+WORKDIR /code
+
+# 安装系统依赖
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends curl && \
+    apt-get clean && \
+    rm -rf /var/lib/apt/lists/*
+
+# 复制必要的文件
+COPY ./requirements.txt /code/requirements.txt
+
+# 安装依赖
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir --upgrade -r /code/requirements.txt && \
+    pip install gunicorn
+
+# 复制应用文件
+COPY ./flask_app.py /code/flask_app.py
+COPY ./service.py /code/service.py
+COPY ./templates /code/templates
+COPY ./static /code/static
+COPY ./.env /code/.env
+
+# 创建必要的目录
+RUN mkdir -p /code/static/uploads
+
+# 创建启动脚本
+RUN echo '#!/bin/bash\n\
+# 优先使用Docker Secret\n\
+if [ -f /run/secrets/MISTRAL_API_KEY ]; then\n\
+  export MISTRAL_API_KEY=$(cat /run/secrets/MISTRAL_API_KEY)\n\
+# 其次使用Hugging Face Repository Secret\n\
+elif [ -n "$HF_SECRET_MISTRAL_API_KEY" ]; then\n\
+  export MISTRAL_API_KEY=$HF_SECRET_MISTRAL_API_KEY\n\
+# 最后尝试读取.env文件\n\
+elif [ -f /code/.env ]; then\n\
+  export $(grep -v "^#" /code/.env | xargs)\n\
+fi\n\
+# 启动应用\n\
+exec "$@"' > /code/entrypoint.sh && \
+  chmod +x /code/entrypoint.sh
+
+# 设置端口
+ENV PORT=7860
+
+# 设置健康检查
+HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 \
+  CMD curl -f http://localhost:${PORT}/ || exit 1
+
+# 暴露端口
+EXPOSE ${PORT}
+
+# 使用启动脚本
+ENTRYPOINT ["/code/entrypoint.sh"]
+
+# 启动应用
+CMD ["gunicorn", "--workers=2", "--bind=0.0.0.0:7860", "flask_app:app"] 

README.md

@@ -3,11 +3,99 @@ title: MistralApp
 emoji: 💬
 colorFrom: yellow
 colorTo: purple
-sdk: gradio
-sdk_version: 5.0.1
-app_file: app.py
+sdk: docker
+app_port: 7860
 pinned: false
 license: apache-2.0
 ---
 
-An example chatbot using [Gradio](https://gradio.app), [`huggingface_hub`](https://huggingface.co/docs/huggingface_hub/v0.22.2/en/index), and the [Hugging Face Inference API](https://huggingface.co/docs/api-inference/index).
+# Mistral AI 多模态聊天助手
+
+一个基于[Flask](https://flask.palletsprojects.com/)和[Mistral AI API](https://docs.mistral.ai/api/)的多模态聊天应用，支持文本和图像分析。
+
+## 特性
+
+- **多模态对话**: 支持文本和图像的混合输入
+- **直接粘贴图片**: 可以使用`Ctrl+V`直接从剪贴板粘贴图片 ✨
+- **现代化UI**: 友好的聊天界面，类似于现代消息应用
+- **自定义系统提示**: 可以根据需要自定义AI助手的行为
+- **响应式设计**: 适配不同的屏幕尺寸
+
+## 使用方法
+
+### 本地运行
+
+1. 设置环境并安装依赖:
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+2. 设置Mistral API密钥:
+   ```bash
+   export MISTRAL_API_KEY=your_api_key_here
+   ```
+
+3. 运行应用:
+   ```bash
+   python flask_app.py
+   ```
+
+4. 在浏览器访问:
+   ```
+   http://localhost:5000
+   ```
+
+### Docker部署
+
+#### 本地构建和运行
+
+1. 创建包含API密钥的.env文件:
+   ```bash
+   echo "MISTRAL_API_KEY=your_mistral_api_key" > .env
+   ```
+
+2. 构建Docker镜像:
+   ```bash
+   docker build -t mistralapp .
+   ```
+
+3. 运行Docker容器:
+   ```bash
+   docker run -p 7860:7860 mistralapp
+   ```
+
+   或者直接通过环境变量提供API密钥:
+   ```bash
+   docker run -p 7860:7860 -e MISTRAL_API_KEY=your_api_key_here mistralapp
+   ```
+
+4. 在浏览器访问:
+   ```
+   http://localhost:7860
+   ```
+
+### Hugging Face Spaces部署
+
+此应用已配置为可以直接在Hugging Face Spaces上部署:
+
+1. 在Hugging Face Spaces创建一个新的Space
+2. 选择Docker作为SDK并设置app_port为7860
+3. 在Space设置中添加Repository Secret:
+   - 名称：`MISTRAL_API_KEY`
+   - 值：您的Mistral API密钥
+4. 将代码推送到该Space的仓库
+5. Hugging Face将自动构建Docker镜像并启动应用
+
+## 技术栈
+
+- **后端**: Flask, Python, Mistral AI API
+- **前端**: HTML, CSS, JavaScript
+- **图像处理**: Pillow
+- **部署**: Docker, Gunicorn
+
+## 版本说明
+
+项目提供了多个版本:
+
+- **Flask版本** (`flask_app.py`): 支持直接粘贴图片，提供更现代的UI
+- **Docker部署版本**: 使用Dockerfile配置，适合在Hugging Face Spaces上运行

app.py

@@ -1,64 +1,314 @@
-import gradio as gr
-from huggingface_hub import InferenceClient
+import os
+import base64
+import io
+import time
+import streamlit as st
+from PIL import Image
+from service import Service
 
 """
-For more information on `huggingface_hub` Inference API support, please check the docs: https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
+使用 mistralai 官方库的 Service 类处理 API 请求
 """
-client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
+# 设置页面配置 - 必须是第一个Streamlit命令
+st.set_page_config(
+    page_title="Mistral 聊天助手",
+    page_icon="🤖",
+    layout="wide",
+    initial_sidebar_state="collapsed"
+)
+
+# 初始化API服务
+service = Service()
+
+# 初始化会话状态
+if "messages" not in st.session_state:
+    st.session_state.messages = []
+
+if "image_data" not in st.session_state:
+    st.session_state.image_data = None
+
+def encode_image_to_base64(image):
+    """将图像转换为 base64 字符串"""
+    if image is None:
+        return None
+    
+    try:
+        # 如果是PIL图像
+        if isinstance(image, Image.Image):
+            buffered = io.BytesIO()
+            image.save(buffered, format="PNG")
+            img_str = base64.b64encode(buffered.getvalue()).decode("utf-8")
+            return f"data:image/png;base64,{img_str}"
+        # 如果是字节流或文件上传对象
+        elif hasattr(image, 'read') or isinstance(image, bytes):
+            if hasattr(image, 'read'):
+                image_bytes = image.read()
+            else:
+                image_bytes = image
+            img_str = base64.b64encode(image_bytes).decode("utf-8")
+            return f"data:image/png;base64,{img_str}"
+        # 如果是文件路径
+        elif isinstance(image, str) and os.path.isfile(image):
+            with open(image, "rb") as img_file:
+                img_str = base64.b64encode(img_file.read()).decode("utf-8")
+            return f"data:image/png;base64,{img_str}"
+        else:
+            st.error(f"不支持的图像类型: {type(image)}")
+            return None
+    except Exception as e:
+        st.error(f"编码图像时出错: {str(e)}")
+        return None
 
+def read_file_content(file_path):
+    """提取文件内容"""
+    if file_path is None:
+        return None
+    
+    try:
+        print(f"尝试读取文件内容: {file_path}")
+        file_ext = os.path.splitext(file_path)[1].lower()
+        
+        # 文本文件扩展名列表
+        text_exts = ['.txt', '.md', '.py', '.js', '.html', '.css', '.json', '.csv', '.xml', '.yaml', '.yml', '.ini', '.conf']
+        
+        if file_ext in text_exts:
+            try:
+                with open(file_path, 'r', encoding='utf-8') as f:
+                    content = f.read()
+                    print(f"成功读取文件内容，长度: {len(content)}")
+                    return content
+            except UnicodeDecodeError:
+                # 尝试使用其他编码
+                try:
+                    with open(file_path, 'r', encoding='gbk') as f:
+                        content = f.read()
+                        print(f"使用GBK编码成功读取文件内容，长度: {len(content)}")
+                        return content
+                except:
+                    print(f"无法解码文件内容，可能是二进制文件")
+                    return f"无法读取文件内容，文件可能是二进制格式或使用了不支持的编码。"
+        else:
+            return f"文件类型 {file_ext} 暂不支持直接读取内容，但我可以尝试分析文件名称。"
+    except Exception as e:
+        print(f"读取文件时出错: {str(e)}")
+        return f"读取文件时出错: {str(e)}"
 
 def respond(
     message,
-    history: list[tuple[str, str]],
+    history,
     system_message,
     max_tokens,
     temperature,
     top_p,
+    image=None
 ):
-    messages = [{"role": "system", "content": system_message}]
+    try:
+        print(f"响应函数收到：message={message[:50]}...(已截断), 图片={image is not None}")
+        
+        # 准备完整的消息历史
+        messages = [{"role": "system", "content": system_message}]
+        
+        # 添加历史消息
+        for msg in history:
+            if msg["role"] == "user":
+                messages.append({"role": "user", "content": msg["content"]})
+            elif msg["role"] == "assistant":
+                messages.append({"role": "assistant", "content": msg["content"]})
+        
+        # 设置模型和参数
+        service.model = "mistral-small-latest"  # 可以根据需要修改为其他模型
+        
+        # 处理带图像的请求
+        if image is not None:
+            print("处理带图像的请求...")
+            # 使用 chat_with_image 方法处理多模态请求
+            response = service.chat_with_image(
+                text_prompt=message if message else "请分析这张图片",
+                image_base64=image,
+                history=messages
+            )
+            print("图像请求已发送到API")
+        else:
+            print("处理纯文本请求...")
+            # 纯文本请求，添加用户消息并获取响应
+            messages.append({"role": "user", "content": message})
+            response = service.get_response(messages)
+        
+        # 返回响应结果
+        print(f"API返回响应: {response[:50]}...(已截断)")
+        return response
+        
+    except Exception as e:
+        print(f"API 请求错误: {str(e)}")
+        return f"处理请求时出错: {str(e)}"
 
-    for val in history:
-        if val[0]:
-            messages.append({"role": "user", "content": val[0]})
-        if val[1]:
-            messages.append({"role": "assistant", "content": val[1]})
+# 加载系统提示
+def load_system_prompt():
+    return """你是一个有帮助的AI助手，可以回答用户的问题，也可以分析用户上传的图片。
+    如果用户上传了图片，请详细描述图片内容，并回答用户关于图片的问题。
+    如果用户没有上传图片，请正常回答用户的文本问题。
+    """
 
-    messages.append({"role": "user", "content": message})
+# 获取API响应
+def get_api_response(prompt, image_data=None):
+    try:
+        # 准备消息历史（不包括最新的用户消息）
+        messages = []
+        # 添加系统消息
+        messages.append({"role": "system", "content": load_system_prompt()})
+        
+        # 添加历史消息
+        for msg in st.session_state.messages:
+            if msg["role"] != "system":  # 跳过系统消息，因为我们已经添加了
+                messages.append({"role": msg["role"], "content": msg["content"]})
+        
+        # 处理带图像的请求
+        if image_data:
+            st.info("正在处理图像...")
+            # 使用 chat_with_image 方法处理多模态请求
+            return service.chat_with_image(
+                text_prompt=prompt if prompt else "请分析这张图片",
+                image_base64=image_data,
+                history=messages
+            )
+        else:
+            # 添加最新的用户消息
+            messages.append({"role": "user", "content": prompt})
+            # 纯文本请求
+            return service.get_response(messages)
+    except Exception as e:
+        st.error(f"API 请求错误: {str(e)}")
+        return f"处理请求时出错: {str(e)}"
 
-    response = ""
+# 显示标题和说明
+st.title("🤖 Mistral 多模态聊天助手")
+st.markdown("""
+### 使用说明
+- 输入文字问题并按回车发送
+- 点击"📋 粘贴图片"按钮，然后粘贴剪贴板中的图片
+- 也可以使用"📎 上传图片"上传本地图片文件
+- 图片和文字可以一起发送，或单独发送
+""")
 
-    for message in client.chat_completion(
-        messages,
-        max_tokens=max_tokens,
-        stream=True,
-        temperature=temperature,
-        top_p=top_p,
-    ):
-        token = message.choices[0].delta.content
+# 创建两列布局
+col1, col2 = st.columns([3, 1])
 
-        response += token
-        yield response
-
-
-"""
-For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
-"""
-demo = gr.ChatInterface(
-    respond,
-    additional_inputs=[
-        gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
-        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
-        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
-        gr.Slider(
-            minimum=0.1,
-            maximum=1.0,
-            value=0.95,
-            step=0.05,
-            label="Top-p (nucleus sampling)",
-        ),
-    ],
-)
+with col2:
+    st.subheader("选项")
+    # 添加图片上传按钮
+    uploaded_file = st.file_uploader("📎 上传图片", type=["jpg", "jpeg", "png"], key="file_uploader")
+    
+    # 粘贴图片按钮
+    if st.button("📋 粘贴图片"):
+        st.session_state.paste_mode = True
+    
+    # 粘贴模式激活时显示粘贴区域
+    if "paste_mode" in st.session_state and st.session_state.paste_mode:
+        st.markdown("### 粘贴图片区域")
+        st.markdown("按 Ctrl+V 粘贴图片")
+        # 使用实验性功能接收粘贴的图片
+        pasted_image = st.camera_input("粘贴的图片会显示在这里", key="camera")
+        
+        if pasted_image:
+            st.session_state.image_data = encode_image_to_base64(pasted_image)
+            st.session_state.paste_mode = False
+            st.experimental_rerun()
+    
+    # 如果通过文件上传器上传了图片
+    if uploaded_file:
+        st.session_state.image_data = encode_image_to_base64(uploaded_file)
+        st.image(uploaded_file, caption="已上传的图片", use_column_width=True)
+    
+    # 清除图片按钮
+    if st.session_state.image_data and st.button("🗑️ 清除图片"):
+        st.session_state.image_data = None
+        st.experimental_rerun()
+    
+    # 清除对话按钮
+    if st.button("🧹 清除对话"):
+        st.session_state.messages = []
+        st.session_state.image_data = None
+        st.experimental_rerun()
 
+with col1:
+    # 显示聊天历史
+    for message in st.session_state.messages:
+        with st.chat_message(message["role"]):
+            # 显示消息内容
+            st.markdown(message["content"])
+            # 如果消息包含图片
+            if "image" in message and message["image"]:
+                st.image(message["image"], use_column_width=True)
+    
+    # 显示当前上传的图片预览
+    if st.session_state.image_data:
+        with st.expander("📷 当前图片预览", expanded=True):
+            # 从base64解码图片以显示预览
+            if "base64" in st.session_state.image_data:
+                image_b64 = st.session_state.image_data.split(",")[1]
+                image_bytes = base64.b64decode(image_b64)
+                st.image(image_bytes, caption="即将发送的图片", use_column_width=True)
+    
+    # 用户输入
+    prompt = st.chat_input("输入您的问题...", key="user_input")
+    
+    # 处理用户输入
+    if prompt:
+        # 添加用户消息到历史
+        user_message = {"role": "user", "content": prompt}
+        if st.session_state.image_data:
+            user_message["image"] = st.session_state.image_data
+        
+        st.session_state.messages.append(user_message)
+        
+        # 显示用户消息
+        with st.chat_message("user"):
+            st.markdown(prompt)
+            if st.session_state.image_data:
+                # 从base64解码图片以显示预览
+                if "base64" in st.session_state.image_data:
+                    image_b64 = st.session_state.image_data.split(",")[1]
+                    image_bytes = base64.b64decode(image_b64)
+                    st.image(image_bytes, use_column_width=True)
+        
+        # 显示助手思考中的状态
+        with st.chat_message("assistant"):
+            with st.spinner("思考中..."):
+                # 获取API响应
+                response = get_api_response(prompt, st.session_state.image_data)
+                
+                # 显示响应
+                message_placeholder = st.empty()
+                full_response = ""
+                
+                # 模拟流式响应
+                for chunk in response.split():
+                    full_response += chunk + " "
+                    message_placeholder.markdown(full_response + "▌")
+                    time.sleep(0.01)
+                
+                message_placeholder.markdown(full_response)
+        
+        # 添加助手响应到历史
+        st.session_state.messages.append({"role": "assistant", "content": full_response})
+        
+        # 清除当前图片数据，防止重复使用
+        st.session_state.image_data = None
+        
+        # 重新运行页面以更新UI
+        st.experimental_rerun()
 
 if __name__ == "__main__":
-    demo.launch()
+    # 从环境变量获取 API 密钥，或者提示用户设置
+    api_key = os.environ.get("MISTRAL_API_KEY", "")
+    
+    if not api_key:
+        st.sidebar.warning("未设置 MISTRAL_API_KEY 环境变量。请设置环境变量或在代码中直接设置密钥。")
+        api_key = st.sidebar.text_input("输入您的 Mistral API 密钥:", type="password")
+    
+    # 设置 API 密钥
+    if api_key:
+        service.headers = {"Authorization": f"Bearer {api_key}"}
+        st.sidebar.success("API密钥已配置")
+    else:
+        st.sidebar.error("请设置 Mistral API 密钥以继续使用")

flask_app.py

@@ -0,0 +1,134 @@
+from flask import Flask, render_template, request, jsonify, session
+import base64
+import io
+import os
+import json
+from PIL import Image
+from service import Service
+
+app = Flask(__name__)
+app.secret_key = os.urandom(24)  # 用于session加密
+
+# 初始化服务
+service = Service()
+
+# 确保目录存在
+if not os.path.exists('static'):
+    os.makedirs('static')
+if not os.path.exists('static/uploads'):
+    os.makedirs('static/uploads')
+
+@app.route('/')
+def index():
+    """渲染主页"""
+    return render_template('index.html')
+
+@app.route('/api/chat', methods=['POST'])
+def chat():
+    """处理聊天请求"""
+    data = request.json
+    prompt = data.get('message', '')
+    image_data = data.get('image', None)
+    history = data.get('history', [])
+    
+    # 确保历史记录包含系统提示
+    has_system_prompt = False
+    for msg in history:
+        if msg.get('role') == 'system':
+            has_system_prompt = True
+            break
+    
+    if not has_system_prompt:
+        # 添加默认的系统提示
+        history.insert(0, {
+            "role": "system",
+            "content": "你是一个AI度量专家助手。你可以分析文本和图像的内容。"
+        })
+    
+    try:
+        if image_data:
+            # 使用图像调用API
+            response = service.chat_with_image(
+                text_prompt=prompt,
+                image_base64=image_data,
+                history=history
+            )
+        else:
+            # 添加当前用户消息
+            current_history = history.copy()
+            current_history.append({"role": "user", "content": prompt})
+            # 纯文本请求
+            response = service.get_response(current_history)
+            
+        return jsonify({
+            'status': 'success',
+            'response': response
+        })
+    except Exception as e:
+        return jsonify({
+            'status': 'error',
+            'message': str(e)
+        }), 500
+
+@app.route('/api/upload_image', methods=['POST'])
+def upload_image():
+    """处理图片上传"""
+    if 'file' not in request.files:
+        return jsonify({'status': 'error', 'message': '没有文件'})
+    
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'status': 'error', 'message': '没有选择文件'})
+    
+    if file:
+        filename = f"upload_{os.urandom(8).hex()}.png"
+        filepath = os.path.join('static/uploads', filename)
+        
+        # 保存文件
+        file.save(filepath)
+        
+        # 读取文件并转为base64
+        with open(filepath, "rb") as img_file:
+            img_str = base64.b64encode(img_file.read()).decode('utf-8')
+        
+        image_data = f"data:image/png;base64,{img_str}"
+        
+        return jsonify({
+            'status': 'success',
+            'image_data': image_data,
+            'image_url': f"/static/uploads/{filename}"
+        })
+
+@app.route('/api/paste_image', methods=['POST'])
+def paste_image():
+    """处理粘贴的图片"""
+    data = request.json
+    image_data = data.get('image_data')
+    
+    if not image_data or not image_data.startswith('data:image'):
+        return jsonify({'status': 'error', 'message': '无效的图片数据'})
+    
+    try:
+        # 从base64解码
+        image_data_parts = image_data.split(',')
+        if len(image_data_parts) != 2:
+            return jsonify({'status': 'error', 'message': '图片格式错误'})
+        
+        # 保存图片到文件
+        filename = f"paste_{os.urandom(8).hex()}.png"
+        filepath = os.path.join('static/uploads', filename)
+        
+        image_bytes = base64.b64decode(image_data_parts[1])
+        with open(filepath, "wb") as f:
+            f.write(image_bytes)
+        
+        return jsonify({
+            'status': 'success',
+            'image_data': image_data,
+            'image_url': f"/static/uploads/{filename}"
+        })
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)})
+
+if __name__ == '__main__':
+    app.run(debug=True, port=5000) 

requirements.txt

@@ -1 +1,5 @@
-huggingface_hub==0.25.2
+huggingface_hub==0.28.0
+mistralai
+flask
+pillow
+requests

service.py

@@ -0,0 +1,149 @@
+"""
+使用 mistralai 官方 Python 库的服务类
+"""
+import os
+from mistralai import Mistral
+from mistralai.models import SystemMessage, UserMessage, AssistantMessage
+import base64
+from typing import List, Dict, Any, Union, Optional
+
+class Service:
+    """
+    使用 mistralai 官方库的服务类，支持多模态内容
+    """
+    def __init__(self):
+        """
+        初始化服务类
+        """
+        self.model = "mistral-small-latest"  # 默认模型
+        # 尝试从不同来源获取 API 密钥
+        self.api_key = None
+        
+        # 1. 从环境变量获取
+        self.api_key = os.environ.get("MISTRAL_API_KEY")
+        
+        # 2. 如果环境变量中没有，尝试从 Hugging Face hub secrets 获取
+        if not self.api_key:
+            try:
+                from huggingface_hub import get_secret
+                self.api_key = get_secret("MISTRAL_API_KEY")
+            except Exception:
+                pass
+        self.headers = {
+            "Authorization": "Bearer YOUR_API_KEY_HERE"  # 这将在使用前被替换
+        }
+        api_key = os.environ.get("MISTRAL_API_KEY", "")
+        if not api_key:
+            try:
+                from huggingface_hub import get_secret
+                api_key = get_secret("MISTRAL_API_KEY")
+            except Exception:
+                pass
+        if not api_key:
+            raise ValueError("API 密钥未设置。请设置 service.headers['Authorization'] = 'Bearer YOUR_API_KEY'")
+            
+        # 初始化客户端
+        self.client = Mistral(api_key=api_key)
+        
+    def load_system_prompt(self, prompt_file: str) -> str:
+        """
+        加载系统提示文件
+        
+        Args:
+            prompt_file: 系统提示文件路径
+            
+        Returns:
+            文件内容
+        """
+        try:
+            with open(prompt_file, 'r', encoding='utf-8') as f:
+                return f.read()
+        except Exception as e:
+            print(f"加载系统提示文件失败: {e}")
+            return ""
+    
+    def get_response(self, messages: List[Dict[str, Any]]) -> str:
+        """
+        从 Mistral API 获取响应
+        
+        Args:
+            messages: 消息列表，包含角色和内容
+            
+        Returns:
+            API 响应内容
+        """
+        try:
+            # 发送请求
+            response = self.client.chat.complete(
+                model=self.model,
+                messages=messages,  # 直接使用字典形式的消息
+                stream=False  # 不使用流式响应
+            )
+            
+            # 提取响应内容
+            return response.choices[0].message.content
+            
+        except Exception as e:
+            error_msg = f"API 请求错误: {str(e)}"
+            print(error_msg)
+            return error_msg
+    
+    def chat_with_image(self, 
+                        text_prompt: str, 
+                        image_base64: Optional[str] = None, 
+                        history: Optional[List[Dict[str, Any]]] = None) -> str:
+        """
+        结合文本和图像（如果有）进行聊天
+        
+        Args:
+            text_prompt: 文本提示
+            image_base64: 图像的base64编码字符串（可选）
+            history: 聊天历史记录（可选）
+            
+        Returns:
+            模型响应
+        """
+        # 初始化消息列表
+        if not history:
+            history = []
+            
+        messages = list(history)  # 复制历史记录
+        
+        # 为当前用户请求创建消息内容
+        user_content: Union[str, List[Dict[str, Any]]]
+        
+        if image_base64:
+            # 如果有图像，创建多模态内容
+            user_content = [
+                {"type": "text", "text": text_prompt if text_prompt else "请分析这张图片"},
+                {"type": "image_url", "image_url": {"url": image_base64}}
+            ]
+        else:
+            # 纯文本内容
+            user_content = text_prompt
+            
+        # 添加用户消息
+        messages.append({"role": "user", "content": user_content})
+        
+        # 获取响应
+        return self.get_response(messages)
+
+
+# 示例用法
+if __name__ == "__main__":
+    # 创建服务实例
+    service = Service()
+    service.headers["Authorization"] = "Bearer YOUR_API_KEY"  # 替换为实际 API 密钥
+    
+    # 加载系统提示
+    system_prompt = "你是一个有用的AI助手，可以回答问题和分析图像。"
+    
+    # 准备消息
+    messages = [
+        {"role": "system", "content": system_prompt},
+        {"role": "user", "content": "你好，请介绍一下自己"}
+    ]
+    
+    # 获取响应
+    response = service.get_response(messages)
+    print(response)

templates/index.html

@@ -0,0 +1,429 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mistral AI</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body {
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f5f8fa;
+            color: #333;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .sidebar {
+            background-color: #fff;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+        .chat-container {
+            display: flex;
+            height: calc(100vh - 200px);
+            min-height: 500px;
+            gap: 20px;
+        }
+        .chat-box {
+            flex: 1;
+            background-color: #fff;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        .chat-messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+        }
+        .message {
+            margin-bottom: 16px;
+            display: flex;
+            align-items: flex-start;
+        }
+        .user-message {
+            justify-content: flex-end;
+        }
+        .assistant-message {
+            justify-content: flex-start;
+        }
+        .message-content {
+            max-width: 80%;
+            padding: 12px 16px;
+            border-radius: 18px;
+            overflow-wrap: break-word;
+        }
+        .user-message .message-content {
+            background-color: #0084ff;
+            color: white;
+            border-bottom-right-radius: 4px;
+        }
+        .assistant-message .message-content {
+            background-color: #f1f0f0;
+            color: #333;
+            border-bottom-left-radius: 4px;
+        }
+        .message-image {
+            max-width: 100%;
+            max-height: 300px;
+            border-radius: 8px;
+            margin-bottom: 8px;
+        }
+        .input-area {
+            background-color: #fff;
+            border-top: 1px solid #e6ecf0;
+            padding: 15px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .image-preview {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 10px;
+            flex-wrap: wrap;
+        }
+        .image-preview img {
+            max-width: 100px;
+            max-height: 100px;
+            border-radius: 4px;
+            object-fit: cover;
+        }
+        .preview-container {
+            position: relative;
+            display: inline-block;
+        }
+        .remove-image {
+            position: absolute;
+            top: -5px;
+            right: -5px;
+            background-color: rgba(255, 255, 255, 0.8);
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            font-size: 12px;
+            border: 1px solid #ddd;
+        }
+        textarea {
+            flex: 1;
+            border: 1px solid #e6ecf0;
+            border-radius: 20px;
+            padding: 10px 15px;
+            resize: none;
+            height: 48px;
+            font-size: 16px;
+            line-height: 1.5;
+            outline: none;
+        }
+        .send-button {
+            border: none;
+            background-color: #0084ff;
+            color: white;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+        }
+        .send-button:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
+        }
+        .clear-button {
+            background-color: #f7f7f7;
+            border: 1px solid #ddd;
+            color: #666;
+            padding: 8px 16px;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.2s;
+            margin-bottom: 15px;
+        }
+        .clear-button:hover {
+            background-color: #ebebeb;
+        }
+        .system-prompt {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #e6ecf0;
+            border-radius: 4px;
+            margin-bottom: 15px;
+            min-height: 100px;
+            resize: vertical;
+        }
+        .thinking {
+            font-style: italic;
+            color: #666;
+            margin-bottom: 15px;
+            padding: 10px;
+            border-radius: 8px;
+            background-color: #f9f9f9;
+            display: inline-block;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1 class="mb-4">Mistral AI 助手</h1>
+        
+        <div class="chat-container">
+            <div class="chat-box">
+                <div class="chat-messages" id="chat-messages">
+                    <!-- 聊天消息将在这里动态添加 -->
+                </div>
+                
+                <div class="input-area-container">
+                    <div class="image-preview" id="image-preview"></div>
+                    <div class="input-area">
+                        <textarea id="message-input" placeholder="输入消息或按Ctrl+V粘贴图片..." onkeydown="handleKeyDown(event)"></textarea>
+                        <button class="send-button" id="send-button" onclick="sendMessage()" disabled>
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M22 2L11 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="sidebar" style="width: 300px;">
+                <h5>设置</h5>
+                <label for="system-prompt">系统提示</label>
+                <textarea id="system-prompt" class="system-prompt">你是一个AI度量专家助手。你可以分析文本和图像的内容。</textarea>
+                
+                <button class="clear-button" onclick="clearChat()">清除聊天记录</button>
+                
+                <div class="mt-4">
+                    <p><strong>使用说明</strong></p>
+                    <ul>
+                        <li>输入文字直接提问</li>
+                        <li>使用Ctrl+V粘贴图片</li>
+                        <li>图片和文字可以一起发送</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // 全局变量
+        let chatHistory = [];
+        let currentImageData = null;
+        
+        // 页面加载时初始化
+        document.addEventListener('DOMContentLoaded', function() {
+            // 监听粘贴事件
+            document.addEventListener('paste', handlePaste);
+            
+            // 监听输入框变化
+            const messageInput = document.getElementById('message-input');
+            messageInput.addEventListener('input', function() {
+                document.getElementById('send-button').disabled = !messageInput.value.trim() && !currentImageData;
+            });
+        });
+        
+        // 处理粘贴事件
+        function handlePaste(event) {
+            const items = (event.clipboardData || event.originalEvent.clipboardData).items;
+            
+            for (let i = 0; i < items.length; i++) {
+                if (items[i].type.indexOf('image') !== -1) {
+                    const blob = items[i].getAsFile();
+                    const reader = new FileReader();
+                    
+                    reader.onload = function(e) {
+                        // 设置当前图片数据
+                        currentImageData = e.target.result;
+                        
+                        // 显示图片预览
+                        const imagePreview = document.getElementById('image-preview');
+                        imagePreview.innerHTML = `
+                            <div class="preview-container">
+                                <img src="${e.target.result}" alt="粘贴的图片">
+                                <div class="remove-image" onclick="removeImage()">×</div>
+                            </div>
+                        `;
+                        
+                        // 启用发送按钮
+                        document.getElementById('send-button').disabled = false;
+                        
+                        // 发送图片到服务器保存
+                        saveImageToServer(currentImageData);
+                    };
+                    
+                    reader.readAsDataURL(blob);
+                }
+            }
+        }
+        
+        // 移除图片
+        function removeImage() {
+            currentImageData = null;
+            document.getElementById('image-preview').innerHTML = '';
+            
+            // 如果消息输入框也是空的，禁用发送按钮
+            const messageInput = document.getElementById('message-input');
+            document.getElementById('send-button').disabled = !messageInput.value.trim();
+        }
+        
+        // 保存图片到服务器
+        function saveImageToServer(imageData) {
+            fetch('/api/paste_image', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ image_data: imageData })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.status === 'success') {
+                    // 成功保存，可以在这里做一些处理，比如更新图片预览的src为服务器返回的URL
+                    console.log('图片已保存到服务器:', data.image_url);
+                } else {
+                    console.error('保存图片错误:', data.message);
+                }
+            })
+            .catch(error => {
+                console.error('保存图片请求错误:', error);
+            });
+        }
+        
+        // 发送消息的键盘处理
+        function handleKeyDown(event) {
+            if (event.key === 'Enter' && !event.shiftKey) {
+                event.preventDefault();
+                sendMessage();
+            }
+        }
+        
+        // 发送消息
+        function sendMessage() {
+            const messageInput = document.getElementById('message-input');
+            const message = messageInput.value.trim();
+            
+            // 如果没有消息文本也没有图片，不发送
+            if (!message && !currentImageData) {
+                return;
+            }
+            
+            // 添加用户消息到聊天窗口
+            addMessageToChat('user', message, currentImageData);
+            
+            // 准备请求数据
+            const systemPrompt = document.getElementById('system-prompt').value.trim();
+            let history = [...chatHistory];
+            
+            // 确保历史记录中有系统提示
+            const hasSystemPrompt = history.some(msg => msg.role === 'system');
+            if (!hasSystemPrompt && systemPrompt) {
+                history.unshift({
+                    role: 'system',
+                    content: systemPrompt
+                });
+            }
+            
+            // 显示思考中状态
+            const thinkingEl = document.createElement('div');
+            thinkingEl.className = 'message assistant-message';
+            thinkingEl.innerHTML = '<div class="thinking">思考中...</div>';
+            document.getElementById('chat-messages').appendChild(thinkingEl);
+            
+            // 发送请求到后端
+            fetch('/api/chat', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    message: message,
+                    image: currentImageData,
+                    history: history
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                // 移除思考中状态
+                document.getElementById('chat-messages').removeChild(thinkingEl);
+                
+                if (data.status === 'success') {
+                    // 添加助手响应到聊天窗口
+                    addMessageToChat('assistant', data.response);
+                } else {
+                    // 显示错误消息
+                    addMessageToChat('assistant', `错误: ${data.message}`);
+                }
+            })
+            .catch(error => {
+                // 移除思考中状态
+                document.getElementById('chat-messages').removeChild(thinkingEl);
+                
+                // 显示错误消息
+                addMessageToChat('assistant', `请求错误: ${error}`);
+            });
+            
+            // 清空输入
+            messageInput.value = '';
+            removeImage();
+            
+            // 禁用发送按钮
+            document.getElementById('send-button').disabled = true;
+        }
+        
+        // 添加消息到聊天窗口和历史记录
+        function addMessageToChat(role, content, image = null) {
+            const chatMessages = document.getElementById('chat-messages');
+            
+            // 创建消息元素
+            const messageEl = document.createElement('div');
+            messageEl.className = `message ${role}-message`;
+            
+            let messageContent = '';
+            
+            // 如果有图片，添加图片
+            if (image) {
+                messageContent += `<img src="${image}" alt="用户上传的图片" class="message-image"><br>`;
+            }
+            
+            // 添加文本内容
+            if (content) {
+                messageContent += content.replace(/\n/g, '<br>');
+            }
+            
+            messageEl.innerHTML = `<div class="message-content">${messageContent}</div>`;
+            chatMessages.appendChild(messageEl);
+            
+            // 滚动到底部
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            
+            // 添加到历史记录
+            chatHistory.push({
+                role: role,
+                content: content
+            });
+        }
+        
+        // 清除聊天记录
+        function clearChat() {
+            chatHistory = [];
+            document.getElementById('chat-messages').innerHTML = '';
+            removeImage();
+        }
+    </script>
+</body>
+</html>