├── 原作者信息.txt
├── 依赖安装.bat
├── extension
    ├── icons
    │   ├── icon128.png
    │   ├── icon16.png
    │   ├── icon48.png
    │   └── icon.svg
    ├── scripts
    │   ├── background.js
    │   ├── config.js
    │   ├── popup.js
    │   ├── content.js
    │   ├── utils.js
    │   ├── api.js
    │   └── ui.js
    ├── manifest.json
    ├── install.md
    ├── styles
    │   ├── content.css
    │   └── popup.css
    ├── README.md
    ├── popup.html
    └── test.html
├── __pycache__
    ├── utils.cpython-311.pyc
    ├── config.cpython-311.pyc
    ├── routes.cpython-311.pyc
    ├── task_poller.cpython-311.pyc
    ├── image_analyzer.cpython-311.pyc
    └── image_generator.cpython-311.pyc
├── uploads
    ├── 005WRXtAgy1i5dhh97zvzj30sy12m0zh.jpg
    ├── 005tZeY3gy1i5egz0xvt3j31900u0442.jpg
    ├── 006GsO6Ygy1i5c1kpeipzj30u0190td6.jpg
    ├── 007Mwc1qly1i5gyrgpxskj32312rl4qq.jpg
    ├── 007m1Jnpgy1i5cd43g11zj30u0140aec.jpg
    ├── 007m1Jnpgy1i5hnvecbiej30u013zwht.jpg
    ├── 007m1Jnpgy1i5hnvel6j5j30sw12ydjj.jpg
    ├── 007mJfIWgy1i5iw1q04p6j30u0140k15.jpg
    ├── 7f650772gy1i5htayvwszj20u013sah6.jpg
    ├── 8bdfede2gy1i5b6jvgiy6j224q2ucqv5.jpg
    ├── 8bdfede2gy1i5b6jy9ophj22c036yb2b.jpg
    ├── 514808791_18388880728140800_113840230923282197_n.jpg
    ├── 58822354_1069622156579030_1845811384949083730_n.jpg
    ├── 514195020_18388880713140800_8962317499317490618_n.jpg
    ├── 514311934_18388880704140800_3148457062263823850_n.jpg
    └── 514767849_18388880701140800_6153753466921903900_n.jpg
├── .codebuddy
    └── .ignored_image
    │   └── 68bf71eea26ef886758ee0f417926702.png
├── requirements.txt
├── utils.py
├── config.py
├── 云端wan2.2和Kontext和Qwen-image训练器（T8版）.txt
├── static
    ├── js
    │   ├── utils.js
    │   ├── api.js
    │   ├── main.js
    │   └── ui.js
    └── css
    │   └── style.css
├── 免费4090在线工作流.txt
├── web_app.py
├── 各种福利.txt
├── README.md
├── image_analyzer.py
├── task_poller.py
├── templates
    └── index.html
└── routes.py


/原作者信息.txt:
--------------------------------------------------------------------------------
1 | 感谢作者：guahunyo


--------------------------------------------------------------------------------
/依赖安装.bat:
--------------------------------------------------------------------------------
1 | pip install -r requirements.txt


--------------------------------------------------------------------------------
/extension/icons/icon128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/extension/icons/icon128.png


--------------------------------------------------------------------------------
/extension/icons/icon16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/extension/icons/icon16.png


--------------------------------------------------------------------------------
/extension/icons/icon48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/extension/icons/icon48.png


--------------------------------------------------------------------------------
/__pycache__/utils.cpython-311.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/__pycache__/utils.cpython-311.pyc


--------------------------------------------------------------------------------
/__pycache__/config.cpython-311.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/__pycache__/config.cpython-311.pyc


--------------------------------------------------------------------------------
/__pycache__/routes.cpython-311.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/__pycache__/routes.cpython-311.pyc


--------------------------------------------------------------------------------
/__pycache__/task_poller.cpython-311.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/__pycache__/task_poller.cpython-311.pyc


--------------------------------------------------------------------------------
/__pycache__/image_analyzer.cpython-311.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/__pycache__/image_analyzer.cpython-311.pyc


--------------------------------------------------------------------------------
/__pycache__/image_generator.cpython-311.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/__pycache__/image_generator.cpython-311.pyc


--------------------------------------------------------------------------------
/uploads/005WRXtAgy1i5dhh97zvzj30sy12m0zh.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/uploads/005WRXtAgy1i5dhh97zvzj30sy12m0zh.jpg


--------------------------------------------------------------------------------
/uploads/005tZeY3gy1i5egz0xvt3j31900u0442.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/uploads/005tZeY3gy1i5egz0xvt3j31900u0442.jpg


--------------------------------------------------------------------------------
/uploads/006GsO6Ygy1i5c1kpeipzj30u0190td6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/uploads/006GsO6Ygy1i5c1kpeipzj30u0190td6.jpg


--------------------------------------------------------------------------------
/uploads/007Mwc1qly1i5gyrgpxskj32312rl4qq.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/uploads/007Mwc1qly1i5gyrgpxskj32312rl4qq.jpg


--------------------------------------------------------------------------------
/uploads/007m1Jnpgy1i5cd43g11zj30u0140aec.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/uploads/007m1Jnpgy1i5cd43g11zj30u0140aec.jpg


--------------------------------------------------------------------------------
/uploads/007m1Jnpgy1i5hnvecbiej30u013zwht.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/uploads/007m1Jnpgy1i5hnvecbiej30u013zwht.jpg


--------------------------------------------------------------------------------
/uploads/007m1Jnpgy1i5hnvel6j5j30sw12ydjj.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/uploads/007m1Jnpgy1i5hnvel6j5j30sw12ydjj.jpg


--------------------------------------------------------------------------------
/uploads/007mJfIWgy1i5iw1q04p6j30u0140k15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/uploads/007mJfIWgy1i5iw1q04p6j30u0140k15.jpg


--------------------------------------------------------------------------------
/uploads/7f650772gy1i5htayvwszj20u013sah6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/uploads/7f650772gy1i5htayvwszj20u013sah6.jpg


--------------------------------------------------------------------------------
/uploads/8bdfede2gy1i5b6jvgiy6j224q2ucqv5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/uploads/8bdfede2gy1i5b6jvgiy6j224q2ucqv5.jpg


--------------------------------------------------------------------------------
/uploads/8bdfede2gy1i5b6jy9ophj22c036yb2b.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/uploads/8bdfede2gy1i5b6jy9ophj22c036yb2b.jpg


--------------------------------------------------------------------------------
/uploads/514808791_18388880728140800_113840230923282197_n.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/uploads/514808791_18388880728140800_113840230923282197_n.jpg


--------------------------------------------------------------------------------
/uploads/58822354_1069622156579030_1845811384949083730_n.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/uploads/58822354_1069622156579030_1845811384949083730_n.jpg


--------------------------------------------------------------------------------
/.codebuddy/.ignored_image/68bf71eea26ef886758ee0f417926702.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/.codebuddy/.ignored_image/68bf71eea26ef886758ee0f417926702.png


--------------------------------------------------------------------------------
/uploads/514195020_18388880713140800_8962317499317490618_n.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/uploads/514195020_18388880713140800_8962317499317490618_n.jpg


--------------------------------------------------------------------------------
/uploads/514311934_18388880704140800_3148457062263823850_n.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/uploads/514311934_18388880704140800_3148457062263823850_n.jpg


--------------------------------------------------------------------------------
/uploads/514767849_18388880701140800_6153753466921903900_n.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/T8mars/Qwen-Browser-plugin/HEAD/uploads/514767849_18388880701140800_6153753466921903900_n.jpg


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
1 | # Step3反推+魔搭生图 Web应用依赖
2 | # 使用国内镜像源加速安装：pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple
3 | Flask>=2.0.0
4 | requests>=2.25.1
5 | openai>=1.0.0
6 | Werkzeug>=2.0.0
7 | Flask-Cors>=3.0.0


--------------------------------------------------------------------------------
/utils.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | import json
 3 | import logging
 4 | import re
 5 | import uuid
 6 | from config import ALLOWED_EXTENSIONS
 7 | 
 8 | def allowed_file(filename):
 9 |     """检查文件扩展名是否被允许"""
10 |     return '.' in filename and \
11 |            filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
12 | 
13 | def extract_csrf_token(cookie_string):
14 |     """从cookie字符串中提取csrf-token"""
15 |     if not cookie_string:
16 |         return None
17 |     match = re.search(r'csrfToken=([^;]+)', cookie_string)
18 |     if match:
19 |         return match.group(1)
20 |     return None
21 | 
22 | def generate_trace_id():
23 |     """生成一个唯一的trace-id"""
24 |     return str(uuid.uuid4())


--------------------------------------------------------------------------------
/config.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | 
 3 | here = os.path.dirname(os.path.abspath(__file__))
 4 | 
 5 | # 配置上传文件夹和允许的文件扩展名
 6 | UPLOAD_FOLDER = os.path.join(here, 'uploads')
 7 | ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif', 'bmp'}
 8 | MAX_CONTENT_LENGTH = 16 * 1024 * 1024  # 16MB上传限制
 9 | 
10 | # 在这里配置您的API Key和Cookie
11 | OPENAI_API_KEY = ""
12 | MODEL_SCOPE_COOKIE = ""
13 | 
14 | # 图像生成默认参数
15 | DEFAULT_WIDTH = 1104
16 | DEFAULT_HEIGHT = 1472
17 | 
18 | # GUA V1 - modelVersionId: 332699
19 | # GUA V2 - modelVersionId: 334516
20 | # GUA V8 - modelVersionId: 346999
21 | # GUA V9 - modelVersionId: 365553
22 | 
23 | LORA_ARGS = [
24 |     {'modelVersionId': 334516, 'scale': 0.5},
25 |     {'modelVersionId': 356161, 'scale': 0.7}
26 | ]


--------------------------------------------------------------------------------
/云端wan2.2和Kontext和Qwen-image训练器（T8版）.txt:
--------------------------------------------------------------------------------
 1 | 晨羽智云Wan2.2训练镜像(T8版)：https://www.chenyu.cn/console/newShare?uuid=7ddb9b7552b54f1f89ec84d1ee04b49d&invitationCode=NGT5S4
 2 | 晨羽智云Kontext训练镜像(T8版)：https://www.chenyu.cn/console/newShare?uuid=e0fee1b741e543238014e1c87ddcd67a&invitationCode=NGT5S4
 3 | Qwen-Image训练镜像(T8版)：https://www.chenyu.cn/console/newShare?uuid=2e12b9eee02742d89c3936ad31627dbe&invitationCode=NGT5S4
 4 | 新版（Diffusion Pipe高质量）Qwen-Image训练镜像：https://www.chenyu.cn/console/newShare?uuid=27889f983c034a77ad1897e5d34b304d&invitationCode=NGT5S4
 5 | 
 6 | 
 7 | 
 8 | 更多镜像陆续更新，可搜索：t8star
 9 | 
10 | 0.1=5的券 300张：W6TGFF 
11 | 
12 | 30 =45的券 300张：T8AIGC
13 | 
14 | 50=100粉丝福利每个都可领取，每个号一次： 50VS50
15 | 
16 | 卡：24G 3090 32G 4080 48G 4090
17 | 
18 | 


--------------------------------------------------------------------------------
/static/js/utils.js:
--------------------------------------------------------------------------------
 1 | // 从cookie中提取csrf token，支持多种格式
 2 | function extractCsrfToken(cookie) {
 3 |     // 尝试从csrf_token格式提取
 4 |     let match = cookie.match(/csrf_token=([^;]+)/);
 5 |     if (match && match[1]) {
 6 |         return match[1];
 7 |     }
 8 |     
 9 |     // 尝试从csrftoken格式提取（标准Django格式）
10 |     match = cookie.match(/csrftoken=([^;]+)/);
11 |     if (match && match[1]) {
12 |         return match[1];
13 |     }
14 |     
15 |     // 尝试从csrf_session格式提取
16 |     match = cookie.match(/csrf_session=([^;]+)/);
17 |     if (match && match[1]) {
18 |         return match[1];
19 |     }
20 |     
21 |     return '';
22 | }
23 | 
24 | // 生成trace id
25 | function generateTraceId() {
26 |     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
27 |         const r = Math.random() * 16 | 0;
28 |         const v = c === 'x' ? r : (r & 0x3 | 0x8);
29 |         return v.toString(16);
30 |     });
31 | }


--------------------------------------------------------------------------------
/extension/scripts/background.js:
--------------------------------------------------------------------------------
 1 | // 创建右键菜单
 2 | chrome.runtime.onInstalled.addListener(() => {
 3 |   chrome.contextMenus.create({
 4 |     id: "reverse-image-search",
 5 |     title: "反推这张图片",
 6 |     contexts: ["image"],
 7 |   });
 8 | });
 9 | 
10 | // 监听右键菜单点击事件
11 | chrome.contextMenus.onClicked.addListener((info, tab) => {
12 |   if (info.menuItemId === "reverse-image-search") {
13 |     const imageUrl = info.srcUrl;
14 | 
15 |     // 注入 CSS
16 |     chrome.scripting.insertCSS({
17 |       target: { tabId: tab.id },
18 |       files: ["styles/content.css"],
19 |     });
20 | 
21 |     // 注入并执行 content script
22 |     chrome.scripting.executeScript({
23 |       target: { tabId: tab.id },
24 |       files: ["scripts/content.js"],
25 |     }).then(() => {
26 |         // 发送消息到 content script
27 |         chrome.tabs.sendMessage(tab.id, {
28 |             action: "showModal",
29 |             imageUrl: imageUrl
30 |         });
31 |     });
32 |   }
33 | });


--------------------------------------------------------------------------------
/extension/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "manifest_version": 3,
 3 |   "name": "Gua Step3反推+魔搭生图",
 4 |   "version": "1.0.0",
 5 |   "description": "基于Step3模型的图片内容分析与魔搭图片生成工具",
 6 |   "permissions": [
 7 |     "storage",
 8 |     "activeTab",
 9 |     "contextMenus",
10 |     "scripting"
11 |   ],
12 |   "background": {
13 |     "service_worker": "scripts/background.js"
14 |   },
15 |   "host_permissions": [
16 |     "<all_urls>"
17 |   ],
18 |   "action": {
19 |     "default_popup": "popup.html",
20 |     "default_title": "Gua Step3反推+魔搭生图"
21 |   },
22 |   "icons": {
23 |     "16": "icons/icon16.png",
24 |     "48": "icons/icon48.png",
25 |     "128": "icons/icon128.png"
26 |   },
27 |   "content_scripts": [
28 |     {
29 |       "matches": ["<all_urls>"],
30 |       "js": ["scripts/content.js"]
31 |     }
32 |   ],
33 |   "web_accessible_resources": [
34 |     {
35 |       "resources": ["modal.html", "modal.css", "styles/content.css"],
36 |       "matches": ["<all_urls>"]
37 |     }
38 |   ],
39 |   "content_security_policy": {
40 |     "extension_pages": "script-src 'self'; object-src 'self'"
41 |   }
42 | }


--------------------------------------------------------------------------------
/免费4090在线工作流.txt:
--------------------------------------------------------------------------------
 1 | Flex.1 Alpha新版Redux对比老板Redux工作流:
 2 | https://www.runninghub.cn/post/1912117580814057474/?utm_source=kol01-RH099
 3 | 新版Redux 512万物迁移超强一致性进阶V3（服装）
 4 | https://www.runninghub.cn/post/1912151378163367938/?utm_source=kol01-RH099
 5 | 新版Redux 512万物迁移超强一致性进阶V3（换头）
 6 | https://www.runninghub.cn/post/1912119247219425281/?utm_source=kol01-RH099
 7 | 最强FLUX控制EasyControl工作流：https://www.runninghub.cn/post/1909250072650129410/?utm_source=kol01-RH099
 8 | Sonic在线数字人及语音迁移工作流：https://www.runninghub.cn/post/1893126942764511234?utm_source=kol01-RH099
 9 | LantentSync新版在线数字人及语音迁移工作流：https://www.runninghub.cn/post/1902618231192891393/?utm_source=kol01-RH099
10 | Wan复杂动作防崩加速V2在线工作流：https://www.runninghub.cn/post/1905280453560176642/?utm_source=kol01-RH099
11 | 第一次注册，通过上述链接送1000点，每日登录送100点，工作流可在线玩也可以下载本地部署
12 | 
13 | 海外Plus会员：https://nf.video/rmo5T 优惠码：T8
14 | meshy PRO会员领取：https://www.meshy.ai/  20美金免费一个月赠送码：Meshy5010
15 | 
16 | Meshy免费一个月PRO会员领取：https://www.meshy.ai/?utm_source=referral-program&utm_medium=link&utm_content=4STUEE
17 | 
18 | 
19 | 云端图生视频，支持破限NSFW：
20 | 破限版！混元一致性修复图生视频Latent保存本地解码工作流：
21 | https://www.runninghub.cn/post/1911249083103703042/?utm_source=kol01-RH099
22 | 破限版！Wan图生视频Latent保存本地解码工作流:
23 | https://www.runninghub.cn/post/1911248941428736001/?utm_source=kol01-RH099
24 | 
25 | 本地解码教程：
26 | https://www.bilibili.com/video/BV1TudzYiEbD/
27 | 给大家应急用，不得用于违法违规行为


--------------------------------------------------------------------------------
/extension/icons/icon.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
 3 |   <defs>
 4 |     <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
 5 |       <stop offset="0%" style="stop-color:#007bff;stop-opacity:1" />
 6 |       <stop offset="100%" style="stop-color:#0056b3;stop-opacity:1" />
 7 |     </linearGradient>
 8 |   </defs>
 9 |   
10 |   <!-- 背景圆形 -->
11 |   <circle cx="64" cy="64" r="60" fill="url(#grad1)" stroke="#fff" stroke-width="4"/>
12 |   
13 |   <!-- 图片图标 -->
14 |   <rect x="24" y="32" width="48" height="36" rx="4" fill="#fff" opacity="0.9"/>
15 |   <rect x="28" y="36" width="40" height="28" rx="2" fill="#e9ecef"/>
16 |   
17 |   <!-- 山峰图标 -->
18 |   <polygon points="32,56 40,44 48,52 56,40 64,48 64,60 32,60" fill="#6c757d"/>
19 |   
20 |   <!-- 太阳 -->
21 |   <circle cx="52" cy="44" r="3" fill="#ffc107"/>
22 |   
23 |   <!-- AI魔法效果 -->
24 |   <g transform="translate(70, 70)">
25 |     <!-- 魔法棒 -->
26 |     <line x1="0" y1="20" x2="20" y2="0" stroke="#fff" stroke-width="3" stroke-linecap="round"/>
27 |     <circle cx="20" cy="0" r="3" fill="#ffc107"/>
28 |     
29 |     <!-- 星星效果 -->
30 |     <g fill="#fff">
31 |       <polygon points="8,8 10,12 14,10 10,14 8,18 6,14 2,16 6,12" opacity="0.8"/>
32 |       <polygon points="24,16 25,18 27,17 25,19 24,21 23,19 21,20 23,18" opacity="0.6"/>
33 |       <polygon points="16,24 17,26 19,25 17,27 16,29 15,27 13,28 15,26" opacity="0.7"/>
34 |     </g>
35 |   </g>
36 |   
37 |   <!-- 文字 G -->
38 |   <text x="64" y="100" font-family="Arial, sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="#fff">G</text>
39 | </svg>


--------------------------------------------------------------------------------
/web_app.py:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env python
 2 | # -*- coding: utf-8 -*-
 3 | 
 4 | import os
 5 | import logging
 6 | from flask import Flask, send_from_directory, request, make_response
 7 | from flask_cors import CORS
 8 | from config import UPLOAD_FOLDER, MAX_CONTENT_LENGTH, OPENAI_API_KEY
 9 | from routes import main_bp
10 | 
11 | 
12 | from task_poller import task_poller_bp
13 | 
14 | def create_app():
15 |     """创建并配置Flask应用"""
16 |     app = Flask(__name__)
17 |     CORS(app, resources={r"/*": {"origins": "*"}}, supports_credentials=True)
18 |     app.secret_key = 'a_very_secret_key'  # 使用一个固定的密钥
19 | 
20 |     @app.before_request
21 |     def handle_preflight():
22 |         if request.method == "OPTIONS":
23 |             res = make_response()
24 |             res.headers['Access-Control-Allow-Origin'] = '*'
25 |             res.headers['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS'
26 |             res.headers['Access-Control-Allow-Headers'] = 'Content-Type, X-Requested-With'
27 |             return res
28 | 
29 |     # 从config.py加载配置
30 |     app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
31 |     app.config['MAX_CONTENT_LENGTH'] = MAX_CONTENT_LENGTH
32 |     app.config['OPENAI_API_KEY'] = OPENAI_API_KEY
33 | 
34 |     # 确保上传文件夹存在
35 |     os.makedirs(UPLOAD_FOLDER, exist_ok=True)
36 | 
37 |     # 注册蓝图
38 |     app.register_blueprint(main_bp)
39 | 
40 |     app.register_blueprint(task_poller_bp)
41 | 
42 |     # 添加uploads目录的静态文件服务
43 |     @app.route('/uploads/<filename>')
44 |     def uploaded_file(filename):
45 |         return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
46 | 
47 |     return app
48 | 
49 | 
50 | 
51 | if __name__ == '__main__':
52 | 
53 |     app = create_app()
54 |     app.run(host='0.0.0.0', port=5000, debug=True)


--------------------------------------------------------------------------------
/各种福利.txt:
--------------------------------------------------------------------------------
 1 | B站UP主制作：T8star-Aix
 2 | 
 3 | Go YounJung（高允贞고윤정） Ins:https://www.instagram.com/goyounjung/
 4 | 
 5 | 贞贞的AI工坊（注册送0.2刀，各种API）：https://ai.t8star.cn/
 6 | 
 7 | 
 8 | 晨羽智云T8邀请链接：https://www.chenyu.cn/console/login?invitationCode=NGT5S4
 9 | 
10 | Kontext训练镜像搜索：t8star
11 | 
12 | 端脑云AI：https://cephalon.cloud/share/register-landing?invite_id=92gD9o
13 | 通过链接注册后可得5000脑力值，学生每个月额外领取1W脑力值，助力中国青少年学习AI！玩转5090！
14 | 
15 | 晨羽智云Kontext训练镜像(T8版)：https://www.chenyu.cn/console/newShare?uuid=e0fee1b741e543238014e1c87ddcd67a&invitationCode=NGT5S4
16 | 更多镜像陆续更新，可搜索：t8star，目前还更新了满血版训练器！
17 | 0.1=5的券 300张：W6TGFF
18 | 30 =45的券 300张：T8AIGC
19 | 50=100粉丝福利每个都可领取，每个号一次： 50VS50
20 | 卡：24G 3090 32G 4080 48G 4090
21 | 
22 | 云声智配（送3天会员推荐码：74C484F4DFAB4AA9）：https://distributor.dubbingx.com/
23 | 
24 | 本期视频数字人通过我的在线工作流制作
25 | 数字人在线工作流：https://www.runninghub.cn/post/1893126942764511234?utm_source=kol01-RH099
26 | WAN图生视频在线工作流：https://www.runninghub.cn/post/1894765811745816578?utm_source=kol01-RH099
27 | 粉丝福利：通过我的链接注册送1000点，否则是没有的
28 | 每天登录100点，每个工作流后续都会可支持在线。
29 | 大家可以免费玩哦，工作流后续也可以这里下载，我正在弄，暂时还是星球下载，后续会每日补之前在线版工作流方便大家测试！
30 | 
31 | 
32 | 灵周年庆，仅限今天会员5折！首月可额外加赠 50% 创作积分（灵感值），最后3小时（6.7 0点结束，结束后也有加送50%积分活动）：https://klingai.kuaishou.com/h5-app/invitation?code=6B4JMX8D4B8P
33 | 粉丝福利，免费AIX AI PS插件：https://t.zsxq.com/R4uwf
34 | 光算云：https://lightcc.cloud/login?invitationCode=yUK3NMVK16690
35 | RunningHub：https://www.runninghub.cn/?inviteCode=kol01-rh099
36 | B站链接：https://space.bilibili.com/385085361
37 | Youtube：https://www.youtube.com/@T8star-Aix
38 | 微博：https://weibo.com/u/7988846574
39 | 免费知识星球：https://t.zsxq.com/7F90A
40 | 官网：http://aix.studio/
41 | Telegram群组：https://t.me/+mZ5Z-Kf_TH9lZjE1
42 | Openart工作流：https://openart.ai/workflows/profile/t8star
43 | LibLib AI工作流：https://www.liblib.art/userpage/f572a7d9aeaa48a7b406fc46a814d479/publish/workflow
44 | Github仓库：https://github.com/T8mars/Comfyui-Aix-NodeMap
45 | 微信公众号：Aix知识星球
46 | X：https://x.com/t8star1
47 | HF模型：https://huggingface.co/t8star
48 | civitai：https://civitai.com/user/t8star
49 | Seaart:https://www.seaart.ai/zhCN/user/9672f7e8c285857e011d24cd7aba94c8?u_code=8HKT7AFC
50 | 
51 | 如遇见有人拿免费的倒卖请立刻退款!
52 | 免费开源分享，请支持开源社区的发展！
53 | 
54 | 如对我们AIX会员有兴趣可以联系我们创始人WX：aix0069
55 | 如果希望进行交流可以，加入我们免费星球：https://t.zsxq.com/7F90A，置顶链接有WX群，海外朋友可以加TG群组：https://t.me/+mZ5Z-Kf_TH9lZjE1
56 | T8也在群里哦，有问题也可以艾特我！最后说下，T8和老张是两个人，大家多多支持我们AIX，谢谢
57 | 
58 | 


--------------------------------------------------------------------------------
/static/css/style.css:
--------------------------------------------------------------------------------
  1 | /* static/css/style.css */
  2 | body {
  3 |     background-color: #f8f9fa;
  4 |     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  5 | }
  6 | 
  7 | .container {
  8 |     max-width: 1200px;
  9 | }
 10 | 
 11 | .card {
 12 |     border: none;
 13 |     border-radius: 0.75rem;
 14 |     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
 15 | }
 16 | 
 17 | .card-header {
 18 |     background-color: #007bff;
 19 |     color: white;
 20 |     font-weight: 600;
 21 |     border-top-left-radius: 0.75rem;
 22 |     border-top-right-radius: 0.75rem;
 23 |     padding: 1rem 1.25rem;
 24 | }
 25 | 
 26 | .card-title {
 27 |     margin-bottom: 0;
 28 |     font-size: 1.25rem;
 29 | }
 30 | 
 31 | .file-drop-area {
 32 |     border: 2px dashed #007bff;
 33 |     border-radius: 0.75rem;
 34 |     color: #007bff;
 35 |     text-align: center;
 36 |     transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
 37 |     cursor: pointer;
 38 |     position: relative;
 39 | }
 40 | 
 41 | .file-drop-area:hover {
 42 |     background-color: #e9f2ff;
 43 |     border-color: #0056b3;
 44 | }
 45 | 
 46 | .file-input {
 47 |     position: absolute;
 48 |     width: 1px;
 49 |     height: 1px;
 50 |     top: -9999px;
 51 |     left: -9999px;
 52 |     opacity: 0;
 53 |     pointer-events: none;
 54 | }
 55 | 
 56 | .feature-icon {
 57 |     font-size: 3rem;
 58 |     line-height: 1;
 59 | }
 60 | 
 61 | #image_preview img {
 62 |     border-radius: 0.5rem;
 63 | }
 64 | 
 65 | 
 66 | 
 67 | #main_preview_area {
 68 |     background-color: #e9ecef;
 69 |     border-radius: 0.5rem;
 70 | }
 71 | 
 72 | #thumbnails_container img {
 73 |     cursor: pointer;
 74 |     border: 2px solid transparent;
 75 |     border-radius: 0.5rem;
 76 |     transition: border-color 0.2s;
 77 |     width: 80px;
 78 |     height: 80px;
 79 |     object-fit: cover;
 80 | }
 81 | 
 82 | #thumbnails_container img.selected,
 83 | #thumbnails_container img:hover {
 84 |     border-color: #007bff;
 85 | }
 86 | 
 87 | .modal-content {
 88 |     border-radius: 0.75rem;
 89 | }
 90 | 
 91 | /* Override some bootstrap defaults for a more modern look */
 92 | .btn {
 93 |     font-weight: 600;
 94 |     border-radius: 0.5rem;
 95 |     padding: 0.75rem 1.25rem;
 96 | }
 97 | 
 98 | .form-control {
 99 |     border-radius: 0.5rem;
100 | }
101 | 
102 | textarea.form-control {
103 |     resize: none;
104 | }


--------------------------------------------------------------------------------
/extension/install.md:
--------------------------------------------------------------------------------
  1 | # 浏览器插件安装指南
  2 | 
  3 | ## 快速安装步骤
  4 | 
  5 | ### 1. 准备图标文件
  6 | 
  7 | 插件需要PNG格式的图标文件。请按以下步骤创建：
  8 | 
  9 | 1. 访问 https://convertio.co/svg-png/ 或其他SVG转PNG工具
 10 | 2. 上传 `extension/icons/icon.svg` 文件
 11 | 3. 分别转换为以下尺寸并保存到 `extension/icons/` 目录：
 12 |    - `icon16.png` (16x16像素)
 13 |    - `icon48.png` (48x48像素)
 14 |    - `icon128.png` (128x128像素)
 15 | 
 16 | ### 2. 启动后端服务
 17 | 
 18 | ```bash
 19 | # 在项目根目录执行
 20 | python web_app.py
 21 | ```
 22 | 
 23 | 确保看到类似输出：
 24 | ```
 25 | * Running on all addresses (0.0.0.0)
 26 | * Running on http://127.0.0.1:5000
 27 | * Running on http://[::1]:5000
 28 | ```
 29 | 
 30 | ### 3. 安装Chrome插件
 31 | 
 32 | 1. 打开Chrome浏览器
 33 | 2. 在地址栏输入：`chrome://extensions/`
 34 | 3. 开启右上角的"开发者模式"
 35 | 4. 点击"加载已解压的扩展程序"
 36 | 5. 选择项目中的 `extension` 文件夹
 37 | 6. 插件安装成功后会显示在扩展列表中
 38 | 
 39 | ### 4. 配置插件
 40 | 
 41 | 1. 点击Chrome工具栏中的插件图标
 42 | 2. 点击设置按钮（⚙️）
 43 | 3. 填入必要配置：
 44 |    - **OpenAI API Key**: 用于图片分析
 45 |    - **ModelScope Cookie**: 用于图片生成
 46 |    - **图片尺寸**: 根据需要调整
 47 | 
 48 | ### 5. 测试功能
 49 | 
 50 | 1. 打开 `extension/test.html` 进行功能测试
 51 | 2. 或直接在插件中上传图片测试
 52 | 
 53 | ## 故障排除
 54 | 
 55 | ### 插件无法加载
 56 | - 确保 `extension/icons/` 目录下有所需的PNG图标文件
 57 | - 检查 `manifest.json` 文件格式是否正确
 58 | 
 59 | ### 无法连接后端服务
 60 | - 确保 `python web_app.py` 正在运行
 61 | - 检查端口5000是否被占用
 62 | - 尝试访问 http://localhost:5000/health 测试连接
 63 | 
 64 | ### API调用失败
 65 | - 检查OpenAI API Key是否有效
 66 | - 确认ModelScope Cookie是否正确
 67 | - 查看浏览器开发者工具的Console和Network标签
 68 | 
 69 | ## 开发调试
 70 | 
 71 | ### 查看插件日志
 72 | 1. 右键点击插件图标
 73 | 2. 选择"检查弹出内容"
 74 | 3. 在开发者工具中查看Console日志
 75 | 
 76 | ### 重新加载插件
 77 | 1. 访问 `chrome://extensions/`
 78 | 2. 找到插件，点击刷新按钮
 79 | 3. 或者先移除再重新加载
 80 | 
 81 | ### 测试页面
 82 | 打开 `extension/test.html` 可以：
 83 | - 检查插件状态
 84 | - 测试后端连接
 85 | - 查看调试信息
 86 | - 使用测试图片
 87 | 
 88 | ## 文件清单
 89 | 
 90 | 确保以下文件存在且完整：
 91 | 
 92 | ```
 93 | extension/
 94 | ├── manifest.json          ✅ 插件配置
 95 | ├── popup.html            ✅ 弹窗页面
 96 | ├── scripts/              
 97 | │   ├── config.js         ✅ 配置文件
 98 | │   ├── utils.js          ✅ 工具函数
 99 | │   ├── ui.js             ✅ UI管理
100 | │   ├── api.js            ✅ API管理
101 | │   └── popup.js          ✅ 主入口
102 | ├── styles/
103 | │   └── popup.css         ✅ 样式文件
104 | ├── icons/
105 | │   ├── icon.svg          ✅ SVG图标
106 | │   ├── icon16.png        ❌ 需要创建
107 | │   ├── icon48.png        ❌ 需要创建
108 | │   └── icon128.png       ❌ 需要创建
109 | ├── test.html             ✅ 测试页面
110 | ├── install.md            ✅ 安装指南
111 | └── README.md             ✅ 使用说明
112 | ```
113 | 
114 | ## 注意事项
115 | 
116 | 1. **Chrome版本**: 需要Chrome 88+支持Manifest V3
117 | 2. **网络权限**: 插件需要访问OpenAI和ModelScope API
118 | 3. **本地服务**: 必须先启动Python后端服务
119 | 4. **API配额**: 注意OpenAI API的使用限制和费用
120 | 
121 | 安装完成后，插件就可以正常使用了！


--------------------------------------------------------------------------------
/static/js/api.js:
--------------------------------------------------------------------------------
 1 | // static/js/api.js
 2 | 
 3 | async function uploadFile(file, onUploadProgress) {
 4 |     const formData = new FormData();
 5 |     formData.append('file', file);
 6 | 
 7 |     try {
 8 |         const response = await axios.post('/upload', formData, {
 9 |             headers: {
10 |                 'Content-Type': 'multipart/form-data'
11 |             },
12 |             onUploadProgress: onUploadProgress
13 |         });
14 |         return response.data;
15 |     } catch (error) {
16 |         console.error('Upload error:', error);
17 |         throw error.response ? new Error(error.response.data.error || '服务器错误') : error;
18 |     }
19 | }
20 | 
21 | async function analyzeImage(showSuccessToast = false) {
22 |     try {
23 |         const response = await axios.post('/analyze');
24 |         if (response.data.success) {
25 |             if (showSuccessToast) {
26 |                 showToast('图片分析成功！', 'success');
27 |             }
28 |             return { success: true, prompt: response.data.prompt };
29 |         } else {
30 |             throw new Error(response.data.error || '分析失败');
31 |         }
32 |     } catch (error) {
33 |         console.error('分析图片时出错:', error);
34 |         showToast('分析图片时出错: ' + error.message, 'danger');
35 |         return { success: false, error: error.message };
36 |     }
37 | }
38 | 
39 | async function analyzeImageFromUrl(imageUrl) {
40 |     try {
41 |         showToast('正在分析网络图片...', 'info');
42 |         const response = await axios.post('/analyze_from_url', { url: imageUrl });
43 |         if (response.data.success) {
44 |             showToast('网络图片分析成功！', 'success');
45 |             return { success: true, prompt: response.data.prompt };
46 |         } else {
47 |             throw new Error(response.data.error || '网络图片分析失败');
48 |         }
49 |     } catch (error) {
50 |         console.error('分析网络图片时出错:', error);
51 |         showToast('分析网络图片时出错: ' + error.message, 'danger');
52 |         return { success: false, error: error.message };
53 |     }
54 | }
55 | 
56 | async function generateQwenImage(prompt) {
57 |     const requestData = {
58 |         prompt: prompt,
59 |     };
60 | 
61 |     try {
62 |         showToast('正在提交生成任务...', 'info');
63 |         const response = await axios.post('/api/generate_image', requestData);
64 |         const data = response.data;
65 | 
66 |         if (!data.success) {
67 |             throw new Error(data.error || '生成图片失败');
68 |         }
69 | 
70 |         // 新的API直接返回图片，不需要轮询
71 |         if (data.images && data.images.length > 0) {
72 |             console.log(`图片生成成功，获取到${data.images.length}张图片`);
73 |             return data.images;
74 |         } else {
75 |             throw new Error('生成成功但未获取到图片');
76 |         }
77 |     } catch (error) {
78 |         console.error(`生成图片时出错: ${error.message}`);
79 |         throw error;
80 |     }
81 | }


--------------------------------------------------------------------------------
/extension/styles/content.css:
--------------------------------------------------------------------------------
  1 | #reverse-image-popup {
  2 |     position: fixed;
  3 |     bottom: 20px;
  4 |     right: 20px;
  5 |     width: 450px;
  6 |     height: auto;
  7 |     background-color: #fff;
  8 |     border: 1px solid #ccc;
  9 |     border-radius: 10px;
 10 |     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 11 |     z-index: 10000;
 12 |     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 13 |     color: #333;
 14 |     overflow: hidden;
 15 |     display: flex;
 16 |     flex-direction: column;
 17 | }
 18 | 
 19 | #reverse-image-popup .popup-header {
 20 |     padding: 10px 15px;
 21 |     background-color: #f5f5f5;
 22 |     border-bottom: 1px solid #ddd;
 23 |     display: flex;
 24 |     justify-content: space-between;
 25 |     align-items: center;
 26 | }
 27 | 
 28 | #reverse-image-popup .popup-header h3 {
 29 |     margin: 0;
 30 |     font-size: 16px;
 31 |     font-weight: 600;
 32 | }
 33 | 
 34 | #reverse-image-popup .close-btn {
 35 |     background: none;
 36 |     border: none;
 37 |     font-size: 20px;
 38 |     cursor: pointer;
 39 |     color: #888;
 40 | }
 41 | 
 42 | #reverse-image-popup .popup-content {
 43 |     padding: 15px;
 44 |     display: flex;
 45 |     flex-direction: column;
 46 |     gap: 15px;
 47 |     overflow-y: auto;
 48 | }
 49 | 
 50 | #reverse-image-popup .error-message {
 51 |     color: #d9534f;
 52 |     font-weight: bold;
 53 |     padding: 10px;
 54 |     border: 1px solid #d9534f;
 55 |     border-radius: 5px;
 56 |     background-color: #f2dede;
 57 | }
 58 | 
 59 | #reverse-image-popup .prompt-section,
 60 | #reverse-image-popup .image-section {
 61 |     display: flex;
 62 |     flex-direction: column;
 63 |     gap: 8px;
 64 | }
 65 | 
 66 | #reverse-image-popup label {
 67 |     font-weight: 600;
 68 |     font-size: 14px;
 69 | }
 70 | 
 71 | #reverse-image-popup .prompt-display {
 72 |     width: 100%;
 73 |     padding: 8px;
 74 |     border: 1px solid #ccc;
 75 |     border-radius: 5px;
 76 |     background-color: #f9f9f9;
 77 |     min-height: 40px;
 78 |     box-sizing: border-box;
 79 |     font-size: 14px;
 80 |     line-height: 1.5;
 81 | }
 82 | 
 83 | #reverse-image-popup .image-container {
 84 |     display: flex;
 85 |     justify-content: space-between;
 86 |     gap: 15px;
 87 | }
 88 | 
 89 | #reverse-image-popup .image-box {
 90 |     flex: 1;
 91 |     display: flex;
 92 |     flex-direction: column;
 93 |     align-items: center;
 94 |     gap: 8px;
 95 | }
 96 | 
 97 | #reverse-image-popup .image-box img {
 98 |     max-width: 100%;
 99 |     height: auto;
100 |     border-radius: 5px;
101 |     border: 1px solid #ddd;
102 | }
103 | 
104 | #reverse-image-popup .image-box p {
105 |     margin: 0;
106 |     font-size: 12px;
107 |     color: #666;
108 |     font-weight: 500;
109 | }
110 | 
111 | #reverse-image-popup .spinner {
112 |     border: 4px solid #f3f3f3;
113 |     border-top: 4px solid #3498db;
114 |     border-radius: 50%;
115 |     width: 30px;
116 |     height: 30px;
117 |     animation: spin 1s linear infinite;
118 |     margin: 20px auto;
119 | }
120 | 
121 | @keyframes spin {
122 |     0% { transform: rotate(0deg); }
123 |     100% { transform: rotate(360deg); }
124 | }


--------------------------------------------------------------------------------
/extension/README.md:
--------------------------------------------------------------------------------
  1 | # Gua Step3反推+魔搭生图 浏览器插件
  2 | 
  3 | 这是一个基于Step3模型的图片内容分析与魔搭图片生成的Chrome浏览器插件。
  4 | 
  5 | ## 功能特性
  6 | 
  7 | - 🖼️ **图片上传**: 支持拖拽上传或点击选择图片文件
  8 | - 🔍 **智能分析**: 使用OpenAI API分析图片内容并生成提示词
  9 | - 🎨 **图片生成**: 基于分析结果使用魔搭平台生成新图片
 10 | - ⚙️ **设置管理**: 可配置API密钥和生成参数
 11 | - 📊 **实时进度**: 显示处理进度和队列状态
 12 | - 📝 **操作日志**: 详细的操作记录和错误信息
 13 | 
 14 | ## 安装说明
 15 | 
 16 | ### 1. 准备图标文件
 17 | 
 18 | 由于技术限制，需要手动添加PNG图标文件：
 19 | 
 20 | 1. 将以下尺寸的PNG图标文件放入 `extension/icons/` 目录：
 21 |    - `icon16.png` (16x16像素)
 22 |    - `icon48.png` (48x48像素) 
 23 |    - `icon128.png` (128x128像素)
 24 | 
 25 | 2. 可以使用提供的 `icon.svg` 文件转换为PNG格式，或者使用在线工具：
 26 |    - 访问 https://convertio.co/svg-png/
 27 |    - 上传 `extension/icons/icon.svg`
 28 |    - 分别转换为16x16、48x48、128x128尺寸的PNG文件
 29 | 
 30 | ### 2. 启动后端服务
 31 | 
 32 | 在安装插件之前，需要先启动本地后端服务：
 33 | 
 34 | ```bash
 35 | # 在项目根目录下
 36 | python web_app.py
 37 | ```
 38 | 
 39 | 确保服务在 `http://localhost:5000` 上运行。
 40 | 
 41 | ### 3. 安装插件
 42 | 
 43 | 1. 打开Chrome浏览器
 44 | 2. 访问 `chrome://extensions/`
 45 | 3. 开启"开发者模式"
 46 | 4. 点击"加载已解压的扩展程序"
 47 | 5. 选择 `extension` 文件夹
 48 | 6. 插件安装完成
 49 | 
 50 | ## 使用方法
 51 | 
 52 | ### 1. 配置设置
 53 | 
 54 | 首次使用需要配置API密钥：
 55 | 
 56 | 1. 点击插件图标打开弹窗
 57 | 2. 点击右上角的设置按钮（⚙️）
 58 | 3. 填入以下信息：
 59 |    - **OpenAI API Key**: 用于图片分析
 60 |    - **ModelScope Cookie**: 用于图片生成
 61 |    - **图片尺寸**: 生成图片的宽度和高度
 62 | 
 63 | ### 2. 处理图片
 64 | 
 65 | 1. 拖拽图片到上传区域，或点击选择文件
 66 | 2. 点击"反推并生成"按钮
 67 | 3. 等待处理完成
 68 | 4. 查看生成的图片结果
 69 | 
 70 | ### 3. 查看结果
 71 | 
 72 | - 生成的图片会显示在缩略图区域
 73 | - 点击缩略图可在主预览区域查看
 74 | - 点击主预览区域可在新标签页中打开图片
 75 | 
 76 | ## 文件结构
 77 | 
 78 | ```
 79 | extension/
 80 | ├── manifest.json          # 插件配置文件
 81 | ├── popup.html            # 弹窗页面
 82 | ├── scripts/              # JavaScript文件
 83 | │   ├── config.js         # 配置文件
 84 | │   ├── utils.js          # 工具函数
 85 | │   ├── ui.js             # UI管理
 86 | │   ├── api.js            # API管理
 87 | │   └── popup.js          # 主入口
 88 | ├── styles/               # 样式文件
 89 | │   └── popup.css         # 弹窗样式
 90 | ├── icons/                # 图标文件
 91 | │   ├── icon.svg          # SVG图标（需转换为PNG）
 92 | │   ├── icon16.png        # 16x16图标（需添加）
 93 | │   ├── icon48.png        # 48x48图标（需添加）
 94 | │   └── icon128.png       # 128x128图标（需添加）
 95 | └── README.md             # 说明文档
 96 | ```
 97 | 
 98 | ## 技术架构
 99 | 
100 | - **前端**: HTML + CSS + JavaScript (ES6+)
101 | - **后端**: Python Flask (需要单独启动)
102 | - **API**: OpenAI GPT-4V + ModelScope
103 | - **存储**: Chrome Extension Storage API
104 | 
105 | ## 注意事项
106 | 
107 | 1. **网络连接**: 需要稳定的网络连接访问OpenAI和ModelScope API
108 | 2. **API配额**: 注意API使用配额和费用
109 | 3. **文件大小**: 支持最大16MB的图片文件
110 | 4. **浏览器兼容**: 仅支持Chrome浏览器（Manifest V3）
111 | 
112 | ## 故障排除
113 | 
114 | ### 常见问题
115 | 
116 | 1. **无法连接到本地服务器**
117 |    - 确保 `web_app.py` 正在运行
118 |    - 检查端口5000是否被占用
119 | 
120 | 2. **API密钥错误**
121 |    - 检查OpenAI API Key是否有效
122 |    - 确认ModelScope Cookie是否正确
123 | 
124 | 3. **图片上传失败**
125 |    - 检查文件格式是否支持
126 |    - 确认文件大小不超过16MB
127 | 
128 | 4. **生成失败**
129 |    - 查看操作日志中的错误信息
130 |    - 检查网络连接状态
131 | 
132 | ### 调试方法
133 | 
134 | 1. 打开Chrome开发者工具
135 | 2. 切换到Console标签
136 | 3. 查看错误信息和日志
137 | 4. 检查Network标签中的API请求
138 | 
139 | ## 更新日志
140 | 
141 | ### v1.0.0
142 | - 初始版本发布
143 | - 支持图片上传和分析
144 | - 支持魔搭平台图片生成
145 | - 完整的UI界面和设置管理
146 | 
147 | ## 许可证
148 | 
149 | 本项目仅供学习和研究使用。


--------------------------------------------------------------------------------
/extension/scripts/config.js:
--------------------------------------------------------------------------------
  1 | // 浏览器插件配置文件
  2 | const CONFIG = {
  3 |     // API 配置
  4 |     API: {
  5 |         // 本地服务器地址 (需要先启动 web_app.py)
  6 |         BASE_URL: 'http://localhost:5000',
  7 |         
  8 |         // API 端点
  9 |         ENDPOINTS: {
 10 |             UPLOAD: '/upload',
 11 |             ANALYZE: '/analyze',
 12 |             GENERATE: '/generate',
 13 |             QUEUE_STATUS: '/queue_status',
 14 |             RESULT: '/result'
 15 |         },
 16 |         
 17 |         // 请求超时时间 (毫秒)
 18 |         TIMEOUT: 30000,
 19 |         
 20 |         // 轮询间隔 (毫秒)
 21 |         POLL_INTERVAL: 2000
 22 |     },
 23 |     
 24 |     // 默认设置
 25 |     DEFAULTS: {
 26 |         // OpenAI API Key (可在设置中修改)
 27 |         OPENAI_API_KEY: '',
 28 |         
 29 |         // ModelScope Cookie (可在设置中修改)
 30 |         MODEL_SCOPE_COOKIE: '',
 31 |         
 32 |         // 图片生成参数
 33 |         IMAGE_WIDTH: 1104,
 34 |         IMAGE_HEIGHT: 1472,
 35 |         
 36 |         // LoRA 参数
 37 |         LORA_ARGS: [
 38 |             { modelVersionId: 334516, scale: 0.5 },
 39 |             { modelVersionId: 356161, scale: 0.7 }
 40 |         ]
 41 |     },
 42 |     
 43 |     // 文件上传配置
 44 |     UPLOAD: {
 45 |         // 允许的文件类型
 46 |         ALLOWED_TYPES: ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/bmp'],
 47 |         
 48 |         // 允许的文件扩展名
 49 |         ALLOWED_EXTENSIONS: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'],
 50 |         
 51 |         // 最大文件大小 (字节)
 52 |         MAX_SIZE: 16 * 1024 * 1024, // 16MB
 53 |         
 54 |         // 文件名验证正则
 55 |         FILENAME_REGEX: /^[a-zA-Z0-9._-]+$/
 56 |     },
 57 |     
 58 |     // UI 配置
 59 |     UI: {
 60 |         // Toast 显示时间 (毫秒)
 61 |         TOAST_DURATION: 3000,
 62 |         
 63 |         // 动画持续时间 (毫秒)
 64 |         ANIMATION_DURATION: 300,
 65 |         
 66 |         // 缩略图大小
 67 |         THUMBNAIL_SIZE: 40,
 68 |         
 69 |         // 主预览区域高度
 70 |         PREVIEW_HEIGHT: 200
 71 |     },
 72 |     
 73 |     // 存储键名
 74 |     STORAGE_KEYS: {
 75 |         OPENAI_API_KEY: 'openai_api_key',
 76 |         MODEL_SCOPE_COOKIE: 'model_scope_cookie',
 77 |         IMAGE_WIDTH: 'image_width',
 78 |         IMAGE_HEIGHT: 'image_height',
 79 |         SETTINGS: 'extension_settings'
 80 |     },
 81 |     
 82 |     // 错误消息
 83 |     ERRORS: {
 84 |         FILE_TOO_LARGE: '文件大小超过限制 (最大 16MB)',
 85 |         INVALID_FILE_TYPE: '不支持的文件类型',
 86 |         UPLOAD_FAILED: '文件上传失败',
 87 |         ANALYZE_FAILED: '图片分析失败',
 88 |         GENERATE_FAILED: '图片生成失败',
 89 |         NETWORK_ERROR: '网络连接错误',
 90 |         SERVER_ERROR: '服务器错误',
 91 |         TIMEOUT_ERROR: '请求超时',
 92 |         INVALID_RESPONSE: '服务器响应无效',
 93 |         MISSING_API_KEY: '请先在设置中配置 OpenAI API Key',
 94 |         MISSING_COOKIE: '请先在设置中配置 ModelScope Cookie'
 95 |     },
 96 |     
 97 |     // 成功消息
 98 |     SUCCESS: {
 99 |         UPLOAD_COMPLETE: '文件上传成功',
100 |         ANALYZE_COMPLETE: '图片分析完成',
101 |         GENERATE_COMPLETE: '图片生成完成',
102 |         SETTINGS_SAVED: '设置保存成功',
103 |         SETTINGS_RESET: '设置重置成功'
104 |     },
105 |     
106 |     // 状态码
107 |     STATUS: {
108 |         PENDING: 'pending',
109 |         PROCESSING: 'processing',
110 |         COMPLETED: 'completed',
111 |         FAILED: 'failed',
112 |         CANCELLED: 'cancelled'
113 |     },
114 |     
115 |     // 日志级别
116 |     LOG_LEVELS: {
117 |         INFO: 'info',
118 |         SUCCESS: 'success',
119 |         WARNING: 'warning',
120 |         ERROR: 'error'
121 |     }
122 | };
123 | 
124 | // 导出配置 (兼容不同的模块系统)
125 | if (typeof module !== 'undefined' && module.exports) {
126 |     module.exports = CONFIG;
127 | } else if (typeof window !== 'undefined') {
128 |     window.CONFIG = CONFIG;
129 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # AI Image Reverse & Generation Tool
 2 | 
 3 | Author: Guahunyo
 4 | 
 5 | Tutorial video:[点击这里观看视频](https://www.youtube.com/watch?v=hD0BmDEHroU)
 6 | 
 7 | ## Overview
 8 | 
 9 | This project is a powerful tool that integrates with your browser to provide a unique image analysis and generation workflow. It allows users to right-click on any image on a webpage, automatically generate a descriptive prompt for that image, and then use that prompt to create a new set of AI-generated images.
10 | 
11 | The entire process is displayed in a clean, user-friendly modal window directly on the current page, providing a seamless experience without navigating away.
12 | 
13 | ## Features
14 | 
15 | - **Browser Integration**: Adds a "反推生图" (Reverse Image & Generate) option to the right-click context menu for images.
16 | - **Reverse Image to Prompt**: Automatically analyzes the selected image and generates a detailed text prompt describing its content.
17 | - **AI Image Generation**: Uses the generated prompt to create four new, unique images using an AI model.
18 | - **Interactive Modal UI**:
19 |   - Displays the original image for reference.
20 |   - Shows the generated text prompt.
21 |   - Presents the four new images with a main image viewer and clickable thumbnails.
22 |   - Allows easy switching between the generated images.
23 | - **Client-Server Architecture**: A Python Flask backend handles the heavy lifting of AI processing, while a lightweight browser extension provides the frontend interface.
24 | 
25 | ## Technology Stack
26 | 
27 | - **Backend**: Python, Flask
28 | - **Frontend**: JavaScript (for the browser extension), HTML, CSS
29 | - **Core Logic**:
30 |   - `image_analyzer.py`: Handles the logic for reversing an image to a text prompt.
31 |   - `routes.py`: Defines the API endpoints for image analysis and generation.
32 | - **Browser Extension**: Built using standard WebExtension APIs (`manifest.json`, `background.js`, `content.js`).
33 | 
34 | ## Project Structure
35 | 
36 | ```
37 | /
38 | ├── extension/            # Browser extension source code
39 | │   ├── scripts/
40 | │   │   ├── background.js # Handles context menu creation
41 | │   │   └── content.js    # Injects the modal and handles API calls
42 | │   └── manifest.json     # Extension configuration
43 | ├── static/               # Static assets for the web interface
44 | ├── templates/            # HTML templates for the web interface
45 | ├── image_analyzer.py     # Core logic for image-to-prompt
46 | ├── routes.py             # Flask API route definitions
47 | ├── web_app.py            # Main Flask application entry point
48 | └── requirements.txt      # Python dependencies
49 | ```
50 | 
51 | ## Setup and Installation
52 | 
53 | 1.  **Install Python Dependencies**:
54 |     Make sure you have Python 3 installed. Then, install the required packages using pip:
55 |     ```bash
56 |     pip install -r requirements.txt
57 |     ```
58 | 
59 | 2.  **Run the Backend Server**:
60 |     Start the Flask server from the project root directory:
61 |     ```bash
62 |     python web_app.py
63 |     ```
64 |     The server will start on `http://127.0.0.1:5000`.
65 | 
66 | 3.  **Load the Browser Extension**:
67 |     - Open your browser (e.g., Chrome, Edge).
68 |     - Navigate to the extensions management page (e.g., `chrome://extensions`).
69 |     - Enable "Developer mode".
70 |     - Click "Load unpacked" and select the `extension` folder from this project.
71 | 
72 | ## How to Use
73 | 
74 | 1.  Navigate to any webpage containing an image you want to use.
75 | 2.  Right-click on the desired image.
76 | 3.  Select "反推生图" from the context menu.
77 | 4.  A modal window will appear. It will first show the generated prompt and then display the four newly generated images.
78 | 5.  You can click on the thumbnails at the bottom to view each generated image in the main display area.
79 | 


--------------------------------------------------------------------------------
/image_analyzer.py:
--------------------------------------------------------------------------------
  1 | import base64
  2 | import logging
  3 | import re
  4 | from openai import OpenAI
  5 | 
  6 | def analyze_image(image_path, api_key):
  7 |     """调用step3 API分析图片"""
  8 |     try:
  9 | 
 10 |         
 11 |         # 读取并编码图片
 12 |         with open(image_path, "rb") as image_file:
 13 |             base64_image = base64.b64encode(image_file.read()).decode("utf-8")
 14 |         
 15 |         # 使用step3反推
 16 |         try:
 17 |             # 初始化OpenAI客户端
 18 |             client = OpenAI(
 19 |                 base_url='https://api-inference.modelscope.cn/v1',
 20 |                 api_key=api_key,
 21 |             )
 22 |             
 23 |             # 构建提示词，包含用户要求的所有反推要点
 24 |             prompt = """在完全遵循图片内容的情况下，生成一段 300 字以内类似下面这段提示词的提示词，并且注重描述真实感，需要描述镜头角度，构图等，如果是脸部特写镜头需要描述人物表情，皮肤细节，如果是全身则需要描述清楚人物姿势等，用自然语言回答，不要出现精准的数字，不允许出现特殊符号
 25 | ## 原则
 26 |     1. 使用**客观、精确和基于事实的语言**。
 27 |     2. 不要描述象征性的含义或氛围（例如，“传达决心”、“增强情绪”、“强调奋斗”、“营造神秘感”）。
 28 |     3. 不要使用隐喻或诗意的表达方式（例如，“月光在水面上翩翩起舞”）。
 29 |     4. 不要评价内容、技巧或呈现方式（例如，“展示”、“揭示”、“亮点”）。
 30 | 示例 1： 在户外海滩场景中，自然光线从斜上方照射，营造明亮氛围。近景构图下，人物戴浅卡其色棒球帽，帽檐边缘柔和，帽身有自然褶皱。头发为浅棕色中长发，发丝在风与光线下呈现动态，几缕发丝垂落肩头。穿深棕色吊带背心，肩带贴合肩部曲线，背心布料自然垂坠，胸前有小型十字刺绣纹理。右手向前伸展，似自拍动作。
 31 | 
 32 | 背景是草地、岩石与海洋：近处草地有自然起伏与草叶纹理；中景是灰黑色岩石，表面纹理清晰；远处是蓝色海洋，海面有波光反射，天空晴朗无云。
 33 | 
 34 | 脸部皮肤呈现自然光泽，眼神看向镜头方向，神态自然。
 35 | 
 36 | 整体自然光中，衣物褶皱、发丝动态、草地纹理、岩石质感、海洋波光等细节高度还原，呈现真实质感。
 37 | 示例 2：在室内房间场景中，光线均匀柔和。中景构图下，人物穿传统风格服饰：白色上衣有红色镶边与花卉刺绣，宽袖设计；红色下裙搭配同色系腰带，肩部系红色飘带。头发为黑色直发，前额齐刘海，头顶戴两朵红色布艺花饰（花瓣纹理清晰，绿叶点缀），发间垂落红色丝带。
 38 | 
 39 | 左手轻搭在身前，右手似整理衣物或持物（动作自然）。背景是浅色调窗帘，旁侧有带花纹布套的座椅。
 40 | 
 41 | 脸部特写：皮肤呈现自然光泽，毛孔细节锐利；眼神看向镜头方向，
 42 | 
 43 | 衣物细节：上衣褶皱随动作自然起伏，红色镶边边缘锐利；下裙面料垂坠感明显，腰带系结纹理清晰；飘带边缘柔和，布艺花饰的针脚与色彩过渡细腻。
 44 | 
 45 | 背景元素：窗帘纹理均匀，座椅布套花纹细节锐利（色彩柔和）。整体在均匀光线下，皮肤、发丝、衣物、配饰的质感高度还原，呈现真实细节。"""
 46 |             
 47 |             # 发送请求
 48 |             response = client.chat.completions.create(
 49 |                 model='stepfun-ai/step3',  # ModelScope Model-Id
 50 |                 messages=[{
 51 |                     'role': 'user',
 52 |                     'content': [{
 53 |                         'type': 'text',
 54 |                         'text': prompt,
 55 |                     }, {
 56 |                         'type': 'image_url',
 57 |                         'image_url': {
 58 |                             'url': f"data:image/jpeg;base64,{base64_image}",
 59 |                         },
 60 |                     }],
 61 |                 }],
 62 |                 stream=False,
 63 |                 timeout=60.0,  # 增加超时时间
 64 |             )
 65 |             
 66 |             # 处理响应
 67 |             if response and response.choices and len(response.choices) > 0:
 68 |                 content = response.choices[0].message.content
 69 |                 
 70 |                 if content:
 71 |                     # 去除多余的空格和换行
 72 |                     filtered_content = re.sub(r'\s+', ' ', content).strip()
 73 |                     
 74 |                     # 限制字符数在500以内
 75 |                     if len(filtered_content) > 500:
 76 |                         # 尝试在合适的位置截断，避免破坏句子结构
 77 |                         truncated_content = filtered_content[:500]
 78 |                         last_period = truncated_content.rfind('。')
 79 |                         last_comma = truncated_content.rfind('，')
 80 |                         
 81 |                         if last_period > 400:  # 确保截断后至少保留400个字符
 82 |                             filtered_content = truncated_content[:last_period + 1]
 83 |                         elif last_comma > 400:
 84 |                             filtered_content = truncated_content[:last_comma + 1]
 85 |                         else:
 86 |                             filtered_content = truncated_content
 87 |                     
 88 |                     return True, filtered_content
 89 |                 else:
 90 |                     return False, "未获取到step3反推结果，请重试。"
 91 |             else:
 92 |                 return False, "step3 API返回格式异常。"
 93 |         except Exception as e:
 94 |             error_msg = f"step3反推时出错: {str(e)}"
 95 |             logging.error(error_msg)
 96 |             return False, error_msg
 97 |     except Exception as e:
 98 |         error_msg = f"反推图片时出错: {str(e)}"
 99 |         logging.error(error_msg)
100 |         return False, error_msg


--------------------------------------------------------------------------------
/task_poller.py:
--------------------------------------------------------------------------------
  1 | from flask import request, jsonify, Blueprint
  2 | from config import MODEL_SCOPE_COOKIE
  3 | import logging
  4 | import time
  5 | import requests
  6 | import json
  7 | 
  8 | task_poller_bp = Blueprint('task_poller', __name__)
  9 | 
 10 | @task_poller_bp.route('/poll_task', methods=['POST'])
 11 | def poll_task():
 12 |     """轮询任务状态"""
 13 |     data = request.get_json()
 14 |     task_id = data.get('task_id')
 15 | 
 16 |     if not task_id:
 17 |         return jsonify({'success': False, 'error': '缺少任务ID'})
 18 | 
 19 |     base_poll_url = 'https://www.modelscope.cn/api/v1/muse/predict/task/status'
 20 |     poll_headers = {
 21 |         'Accept': 'application/json, text/plain, */*',
 22 |         'Cookie': MODEL_SCOPE_COOKIE,
 23 |         'Referer': 'https://www.modelscope.cn/aigc/imageGeneration',
 24 |         'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'
 25 |     }
 26 | 
 27 |     try:
 28 |         poll_url = f'{base_poll_url}?taskId={task_id}'
 29 |         poll_response = requests.get(poll_url, headers=poll_headers, timeout=10)
 30 |         poll_response.raise_for_status()
 31 |         response_json = poll_response.json()
 32 | 
 33 |         logging.info(f'轮询任务 {task_id} 状态: {response_json}')
 34 | 
 35 |         if response_json.get('Success') and response_json.get('Data'):
 36 |             task_data = response_json['Data'].get('data', {})
 37 |             status = task_data.get('status', '')
 38 | 
 39 |             if status == 'COMPLETED':
 40 |                 images = [item.get('url') for item in task_data.get('predictResult', []) if item and item.get('url')]
 41 |                 if images:
 42 |                     return jsonify({'success': True, 'status': 'COMPLETED', 'images': images})
 43 |                 else:
 44 |                     return jsonify({'success': False, 'status': 'FAILED', 'error': '图片生成成功但未找到图片URL'})
 45 |             elif status == 'FAILED':
 46 |                 error_msg = task_data.get('errorMsg', '未知错误')
 47 |                 return jsonify({'success': False, 'status': 'FAILED', 'error': error_msg})
 48 |             else: # PROCESSING, QUEUING, PENDING
 49 |                 progress = task_data.get('progress', {})
 50 |                 percent = progress.get('percent', 0)
 51 |                 detail = progress.get('detail', '正在处理中...')
 52 |                 return jsonify({'success': True, 'status': status, 'progress': percent, 'message': detail})
 53 |         else:
 54 |             return jsonify({'success': False, 'error': '轮询API返回格式异常'})
 55 | 
 56 |     except requests.exceptions.RequestException as e:
 57 |         logging.error(f'轮询任务状态时出错: {e}')
 58 |         return jsonify({'success': False, 'error': f'轮询任务状态时出错: {e}'})
 59 | 
 60 | @task_poller_bp.route('/task_status/<task_id>', methods=['GET'])
 61 | def get_task_status(task_id):
 62 |     """Polls the ModelScope API for the status of a given task ID."""
 63 |     try:
 64 |         cookie = MODEL_SCOPE_COOKIE
 65 |         if not cookie:
 66 |             return jsonify({'status': 'failed', 'error': 'Cookie not configured'})
 67 | 
 68 |         poll_url = f'https://www.modelscope.cn/api/v1/muse/predict/task/status?taskId={task_id}'
 69 |         poll_headers = {
 70 |             'Accept': 'application/json, text/plain, */*',
 71 |             'Cookie': cookie,
 72 |             'Referer': 'https://www.modelscope.cn/aigc/imageGeneration',
 73 |             'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'
 74 |         }
 75 | 
 76 |         poll_response = requests.get(poll_url, headers=poll_headers, timeout=10)
 77 |         poll_response.raise_for_status()
 78 |         response_json = poll_response.json()
 79 | 
 80 |         logging.info(f'Polling task {task_id} status: {response_json}')
 81 | 
 82 |         if response_json.get('Success') and response_json.get('Data'):
 83 |             task_data = response_json.get('Data', {}).get('data', {})
 84 |             status = task_data.get('status', '')
 85 | 
 86 |             if status == 'COMPLETED':
 87 |                 images = [item.get('url') for item in task_data.get('predictResult', []) if item and item.get('url')]
 88 |                 if images:
 89 |                     return jsonify({'status': 'completed', 'result': {'image_url': images[0]}})
 90 |                 else:
 91 |                     return jsonify({'status': 'failed', 'error': 'Image generation succeeded but no image URL found'})
 92 |             elif status == 'FAILED':
 93 |                 error_msg = task_data.get('errorMsg', 'Unknown error')
 94 |                 return jsonify({'status': 'failed', 'error': error_msg})
 95 |             else: # PROCESSING, QUEUING, PENDING
 96 |                 return jsonify({'status': status})
 97 |         else:
 98 |             return jsonify({'status': 'failed', 'error': 'Polling API returned an unexpected format'})
 99 | 
100 |     except requests.exceptions.RequestException as e:
101 |         logging.error(f"Error polling task status for {task_id}: {e}")
102 |         return jsonify({'status': 'failed', 'error': f'Error polling task status: {e}'})


--------------------------------------------------------------------------------
/extension/popup.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Gua Step3反推+魔搭生图</title>
  7 |     <link rel="stylesheet" href="styles/popup.css">
  8 | </head>
  9 | <body>
 10 |     <div class="container">
 11 |         <!-- 头部 -->
 12 |         <div class="header">
 13 |             <h1>🎨 Gua Step3反推+魔搭生图</h1>
 14 |             <button id="settingsBtn" class="settings-btn" title="设置">⚙️</button>
 15 |         </div>
 16 | 
 17 |         <!-- 主内容区域 -->
 18 |         <div class="main-content">
 19 |             <!-- 图片上传区域 -->
 20 |             <div class="upload-section">
 21 |                 <div id="fileDropArea" class="file-drop-area">
 22 |                     <input type="file" id="fileInput" class="file-input" accept=".png,.jpg,.jpeg,.gif,.bmp" />
 23 |                     
 24 |                     <!-- 拖放提示 -->
 25 |                     <div id="dropPlaceholder" class="drop-placeholder">
 26 |                         <div class="feature-icon">📁</div>
 27 |                         <p>拖放图片到此处，或点击上传</p>
 28 |                         <p class="text-muted">(支持 PNG、JPG、JPEG、GIF、BMP)</p>
 29 |                     </div>
 30 |                     
 31 |                     <!-- 图片预览 -->
 32 |                     <div id="imagePreview" class="image-preview" style="display: none;">
 33 |                         <img id="previewImg" src="" alt="预览图片">
 34 |                     </div>
 35 |                 </div>
 36 | 
 37 |                 <!-- 上传进度 -->
 38 |                 <div id="uploadProgress" class="upload-progress" style="display: none;">
 39 |                     <div class="progress-bar">
 40 |                         <div id="progressFill" class="progress-fill"></div>
 41 |                     </div>
 42 |                     <span id="progressText">上传中...</span>
 43 |                 </div>
 44 | 
 45 |                 <!-- 操作按钮 -->
 46 |                 <div class="action-buttons">
 47 |                     <button id="analyzeBtn" class="btn btn-primary" disabled>反推并生成</button>
 48 |                 </div>
 49 |             </div>
 50 | 
 51 |             <!-- 生成结果区域 -->
 52 |             <div class="result-section">
 53 |                 <!-- 排队信息 -->
 54 |                 <div id="queueInfo" class="queue-info" style="display: none;">
 55 |                     <h3>正在处理中</h3>
 56 |                     <p id="queueDetail">正在获取排队信息...</p>
 57 |                     <div class="progress-bar">
 58 |                         <div id="queueProgress" class="progress-fill"></div>
 59 |                     </div>
 60 |                 </div>
 61 |                 
 62 |                 <!-- 主预览区域 -->
 63 |                 <div id="mainPreview" class="main-preview">
 64 |                     <div class="preview-placeholder">
 65 |                         选择下方缩略图查看
 66 |                     </div>
 67 |                 </div>
 68 |                 
 69 |                 <!-- 缩略图区域 -->
 70 |                 <div id="thumbnailsContainer" class="thumbnails-container">
 71 |                     <!-- 缩略图将在这里动态生成 -->
 72 |                 </div>
 73 |             </div>
 74 |         </div>
 75 | 
 76 | 
 77 | 
 78 |         <!-- 设置面板 -->
 79 |         <div id="settingsPanel" class="settings-panel" style="display: none;">
 80 |             <div class="settings-header">
 81 |                 <h3>设置</h3>
 82 |                 <button id="closeSettings" class="close-btn">×</button>
 83 |             </div>
 84 |             <div class="settings-content">
 85 |                 <div class="setting-item">
 86 |                     <label for="openaiKey">OpenAI API Key:</label>
 87 |                     <input type="password" id="openaiKey" placeholder="输入你的OpenAI API Key">
 88 |                 </div>
 89 |                 <div class="setting-item">
 90 |                     <label for="modelScopeCookie">ModelScope Cookie:</label>
 91 |                     <textarea id="modelScopeCookie" placeholder="输入你的ModelScope Cookie" rows="4"></textarea>
 92 |                 </div>
 93 |                 <div class="setting-item">
 94 |                     <label for="imageWidth">图片宽度:</label>
 95 |                     <input type="number" id="imageWidth" value="1104" min="256" max="2048">
 96 |                 </div>
 97 |                 <div class="setting-item">
 98 |                     <label for="imageHeight">图片高度:</label>
 99 |                     <input type="number" id="imageHeight" value="1472" min="256" max="2048">
100 |                 </div>
101 |                 <div class="settings-actions">
102 |                     <button id="saveSettings" class="btn btn-primary">保存设置</button>
103 |                     <button id="resetSettings" class="btn btn-secondary">重置</button>
104 |                 </div>
105 |             </div>
106 |         </div>
107 | 
108 |         <!-- Toast 通知容器 -->
109 |         <div id="toastContainer" class="toast-container"></div>
110 |     </div>
111 | 
112 |     <script src="scripts/config.js"></script>
113 |     <script src="scripts/utils.js"></script>
114 |     <script src="scripts/ui.js"></script>
115 |     <script src="scripts/api.js"></script>
116 |     <script src="scripts/popup.js"></script>
117 | </body>
118 | </html>


--------------------------------------------------------------------------------
/extension/scripts/popup.js:
--------------------------------------------------------------------------------
  1 | // 主入口文件
  2 | class PopupApp {
  3 |     constructor() {
  4 |         this.uiManager = null;
  5 |         this.apiManager = null;
  6 |         this.isProcessing = false;
  7 |         
  8 |         this.init();
  9 |     }
 10 |     
 11 |     /**
 12 |      * 初始化应用
 13 |      */
 14 |     async init() {
 15 |         try {
 16 |             // 等待DOM加载完成
 17 |             if (document.readyState === 'loading') {
 18 |                 await new Promise(resolve => {
 19 |                     document.addEventListener('DOMContentLoaded', resolve);
 20 |                 });
 21 |             }
 22 |             
 23 |             // 初始化管理器
 24 |             this.uiManager = new UIManager();
 25 |             this.apiManager = new APIManager();
 26 |             
 27 |             // 绑定事件
 28 |             this.bindEvents();
 29 |             
 30 |             // 检查服务器连接
 31 |             await this.checkServerConnection();
 32 |             
 33 |             // 应用启动完成
 34 | 
 35 |             
 36 |         } catch (error) {
 37 |             console.error('应用初始化失败:', error);
 38 |             if (this.uiManager) {
 39 | 
 40 |             }
 41 |         }
 42 |     }
 43 |     
 44 |     /**
 45 |      * 绑定事件
 46 |      */
 47 |     bindEvents() {
 48 |         // 重写UI管理器的处理方法，使用真实的API调用
 49 |         const originalHandleAnalyze = this.uiManager.handleAnalyze.bind(this.uiManager);
 50 |         this.uiManager.handleAnalyze = this.handleAnalyze.bind(this);
 51 |         
 52 |         // 监听窗口关闭事件
 53 |         window.addEventListener('beforeunload', () => {
 54 |             if (this.isProcessing) {
 55 |                 this.apiManager.cancelCurrentTask();
 56 |             }
 57 |         });
 58 |     }
 59 |     
 60 |     /**
 61 |      * 检查服务器连接
 62 |      */
 63 |     async checkServerConnection() {
 64 |         try {
 65 |             const isConnected = await this.apiManager.checkConnection();
 66 |             
 67 |             if (isConnected) {
 68 | 
 69 |             } else {
 70 | 
 71 |                 this.uiManager.showToast('无法连接到本地服务器', 'warning');
 72 |             }
 73 |             
 74 |         } catch (error) {
 75 | 
 76 |         }
 77 |     }
 78 |     
 79 |     /**
 80 |      * 处理分析按钮点击（真实API版本）
 81 |      */
 82 |     async handleAnalyze() {
 83 |         if (!this.uiManager.currentImageData) {
 84 |             this.uiManager.showToast('请先选择图片', 'warning');
 85 |             return;
 86 |         }
 87 |         
 88 |         if (this.isProcessing) {
 89 |             this.uiManager.showToast('正在处理中，请稍候', 'warning');
 90 |             return;
 91 |         }
 92 |         
 93 |         // 检查设置
 94 |         const settings = await this.uiManager.getSettings();
 95 |         if (!settings.openaiKey) {
 96 |             this.uiManager.showToast(CONFIG.ERRORS.MISSING_API_KEY, 'error');
 97 |             this.uiManager.showSettings();
 98 |             return;
 99 |         }
100 |         
101 |         if (!settings.modelScopeCookie) {
102 |             this.uiManager.showToast(CONFIG.ERRORS.MISSING_COOKIE, 'error');
103 |             this.uiManager.showSettings();
104 |             return;
105 |         }
106 |         
107 |         try {
108 |             this.isProcessing = true;
109 |             
110 |             // 禁用按钮
111 |             this.uiManager.elements.analyzeBtn.disabled = true;
112 |             this.uiManager.elements.analyzeBtn.textContent = '处理中...';
113 |             
114 |             // 开始处理
115 |             await this.processImageWithRealAPI(settings);
116 |             
117 |         } catch (error) {
118 |             this.uiManager.showToast('处理失败: ' + error.message, 'error');
119 | 
120 |         } finally {
121 |             this.isProcessing = false;
122 |             
123 |             // 恢复按钮
124 |             this.uiManager.elements.analyzeBtn.disabled = false;
125 |             this.uiManager.elements.analyzeBtn.textContent = '反推并生成';
126 |         }
127 |     }
128 |     
129 |     /**
130 |      * 使用真实API处理图片
131 |      */
132 |     async processImageWithRealAPI(settings) {
133 |         const callbacks = {
134 |             // 上传进度
135 |             onUploadProgress: (percent) => {
136 |                 this.uiManager.showUploadProgress(percent);
137 | 
138 |             },
139 |             
140 |             // 分析开始
141 |             onAnalyzeStart: () => {
142 |                 this.uiManager.hideUploadProgress();
143 | 
144 |                 this.uiManager.showQueueInfo('正在分析图片内容...', 0);
145 |             },
146 |             
147 |             // 分析完成
148 |             onAnalyzeComplete: (result) => {
149 | 
150 |             },
151 |             
152 |             // 生成开始
153 |             onGenerateStart: () => {
154 | 
155 |                 this.uiManager.updateQueueInfo('正在生成新图片...', 0);
156 |             },
157 |             
158 |             // 生成进度
159 |             onGenerateProgress: (status) => {
160 |                 const progress = status.progress || 0;
161 |                 this.uiManager.updateQueueProgress(progress);
162 |                 
163 |                 if (status.message) {
164 |                     this.uiManager.updateQueueInfo(status.message, progress);
165 |                 }
166 |                 
167 | 
168 |             },
169 |             
170 |             // 生成完成
171 |             onGenerateComplete: (result) => {
172 |                 this.uiManager.hideQueueInfo();
173 | 
174 |                 
175 |                 if (result.images && result.images.length > 0) {
176 |                     this.uiManager.showGeneratedImages(result.images);
177 |                     this.uiManager.showToast(`成功生成 ${result.images.length} 张图片`, 'success');
178 |                 } else {
179 |                     this.uiManager.showToast('未生成任何图片', 'warning');
180 |                 }
181 |             },
182 |             
183 |             // 错误处理
184 |             onError: (error) => {
185 |                 this.uiManager.hideQueueInfo();
186 |                 this.uiManager.hideUploadProgress();
187 | 
188 |             }
189 |         };
190 |         
191 |         // 调用API处理图片
192 |         await this.apiManager.processImage(
193 |             this.uiManager.currentImageData,
194 |             settings,
195 |             callbacks
196 |         );
197 |     }
198 |     
199 |     /**
200 |      * 获取应用状态
201 |      */
202 |     getStatus() {
203 |         return {
204 |             isProcessing: this.isProcessing,
205 |             hasImage: !!this.uiManager?.currentImageData,
206 |             generatedCount: this.uiManager?.generatedImages?.length || 0
207 |         };
208 |     }
209 | }
210 | 
211 | // 全局应用实例
212 | let popupApp = null;
213 | 
214 | // 当DOM加载完成时初始化应用
215 | if (document.readyState === 'loading') {
216 |     document.addEventListener('DOMContentLoaded', () => {
217 |         popupApp = new PopupApp();
218 |     });
219 | } else {
220 |     popupApp = new PopupApp();
221 | }
222 | 
223 | // 导出应用类（用于调试）
224 | if (typeof window !== 'undefined') {
225 |     window.PopupApp = PopupApp;
226 |     window.getPopupApp = () => popupApp;
227 | }


--------------------------------------------------------------------------------
/extension/scripts/content.js:
--------------------------------------------------------------------------------
  1 | if (typeof popup === 'undefined') {
  2 |     var popup = null;
  3 | }
  4 | 
  5 | function createPopup(imageUrl) {
  6 |     if (popup) {
  7 |         popup.remove();
  8 |     }
  9 | 
 10 |     popup = document.createElement('div');
 11 |     popup.id = 'reverse-image-popup';
 12 |     popup.innerHTML = `
 13 |         <div class="popup-header">
 14 |             <h3>反推生图</h3>
 15 |             <button class="close-btn">&times;</button>
 16 |         </div>
 17 |         <div class="popup-content">
 18 |             <div class="error-message" style="display: none;"></div>
 19 |             <div class="prompt-section">
 20 |                 <label>反推提示词:</label>
 21 |                 <div class="prompt-display"></div>
 22 |             </div>
 23 |             <div class="image-container">
 24 |                 <div class="image-box">
 25 |                     <p>原始图片</p>
 26 |                     <img src="${imageUrl}" alt="Original Image" style="max-width: 100%; height: auto;">
 27 |                 </div>
 28 |                 <div class="image-box">
 29 |                     <p>生成图片</p>
 30 |                     <div class="generated-image-wrapper">
 31 |                         <div class="spinner" style="display: none;"></div>
 32 |                         <img id="main-generated-image" src="" alt="Generated Image" style="display:none; max-width: 100%; height: auto; margin-bottom: 10px; border-radius: 4px;">
 33 |                         <div id="thumbnail-container" style="display: flex; flex-wrap: nowrap; gap: 5px; justify-content: center; align-items: center; width: 100%;"></div>
 34 |                     </div>
 35 |                 </div>
 36 |             </div>
 37 |         </div>
 38 |     `;
 39 |     document.body.appendChild(popup);
 40 | 
 41 |     const closeBtn = popup.querySelector('.close-btn');
 42 |     closeBtn.addEventListener('click', () => {
 43 |         popup.remove();
 44 |         popup = null;
 45 |     });
 46 | 
 47 |     return popup;
 48 | }
 49 | 
 50 | chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 51 |     if (request.action === "showModal") {
 52 |         const newPopup = createPopup(request.imageUrl);
 53 |         const promptDisplay = newPopup.querySelector('.prompt-display');
 54 |         const errorMessage = newPopup.querySelector('.error-message');
 55 |         const spinner = newPopup.querySelector('.spinner');
 56 | 
 57 |         spinner.style.display = 'block';
 58 | 
 59 |         fetch('http://127.0.0.1:5000/reverse_image', {
 60 |             method: 'POST',
 61 |             headers: {
 62 |                 'Content-Type': 'application/json',
 63 |             },
 64 |             body: JSON.stringify({ image_url: request.imageUrl }),
 65 |         })
 66 |         .then(response => {
 67 |             if (!response.ok) {
 68 |                 throw new Error(`HTTP error! status: ${response.status}`);
 69 |             }
 70 |             return response.json();
 71 |         })
 72 |         .then(data => {
 73 |             if (data.success && data.prompt) {
 74 |                 promptDisplay.textContent = data.prompt;
 75 |                 
 76 |                 fetch('http://127.0.0.1:5000/api/generate_image', {
 77 |                     method: 'POST',
 78 |                     headers: {
 79 |                         'Content-Type': 'application/json',
 80 |                     },
 81 |                     body: JSON.stringify({ prompt: data.prompt }),
 82 |                 })
 83 |                 .then(response => response.json())
 84 |                 .then(generateData => {
 85 |                     spinner.style.display = 'none';
 86 |                     if (generateData.success && generateData.images && generateData.images.length > 0) {
 87 |                         const mainImage = newPopup.querySelector('#main-generated-image');
 88 |                         const thumbnailContainer = newPopup.querySelector('#thumbnail-container');
 89 |                         
 90 |                         thumbnailContainer.innerHTML = '';
 91 |                         mainImage.src = generateData.images[0];
 92 |                         mainImage.style.display = 'block';
 93 | 
 94 |                         const imageCount = generateData.images.length;
 95 |                         const gap = 5;
 96 |                         const border = 2; // px
 97 |                         const borderWidth = border * 2;
 98 |                         
 99 |                         const imageBox = thumbnailContainer.closest('.image-box');
100 |                         const containerWidth = imageBox ? imageBox.clientWidth : 0;
101 |                         const totalGapWidth = (imageCount - 1) * gap;
102 |                         const totalBorderWidth = imageCount * borderWidth;
103 |                         
104 |                         const thumbSize = Math.max(0, Math.floor((containerWidth - totalGapWidth - totalBorderWidth) / imageCount));
105 | 
106 |                         generateData.images.forEach((imageUrl, index) => {
107 |                             const thumb = document.createElement('img');
108 |                             thumb.src = imageUrl;
109 |                             thumb.style.width = `${thumbSize}px`;
110 |                             thumb.style.height = `${thumbSize}px`;
111 |                             thumb.style.objectFit = 'cover';
112 |                             thumb.style.cursor = 'pointer';
113 |                             thumb.style.borderRadius = '4px';
114 |                             thumb.style.border = index === 0 ? `${border}px solid #007bff` : `${border}px solid transparent`;
115 |                             
116 |                             thumb.addEventListener('click', () => {
117 |                                 mainImage.src = imageUrl;
118 |                                 thumbnailContainer.querySelectorAll('img').forEach(t => t.style.border = `${border}px solid transparent`);
119 |                                 thumb.style.border = `${border}px solid #007bff`;
120 |                             });
121 |                             thumbnailContainer.appendChild(thumb);
122 |                         });
123 |                     } else {
124 |                         errorMessage.textContent = `错误: ${generateData.error || '未能生成图片'}`;
125 |                         errorMessage.style.display = 'block';
126 |                     }
127 |                 })
128 |                 .catch(error => {
129 |                     spinner.style.display = 'none';
130 |                     errorMessage.textContent = `生图请求失败: ${error.message}`;
131 |                     errorMessage.style.display = 'block';
132 |                 });
133 |             } else {
134 |                 spinner.style.display = 'none';
135 |                 errorMessage.textContent = `错误: ${data.error || '未能启动反推任务'}`;
136 |                 errorMessage.style.display = 'block';
137 |             }
138 |         })
139 |         .catch(error => {
140 |             spinner.style.display = 'none';
141 |             errorMessage.textContent = `请求失败: ${error.message}`;
142 |             errorMessage.style.display = 'block';
143 |         });
144 |     }
145 | });


--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Gua Step3反推+魔搭生图</title>
  7 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  8 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  9 |     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 10 |     <link rel="stylesheet" href="/static/css/style.css">
 11 | </head>
 12 | <body>
 13 |     <div class="container">
 14 |         <!-- 主内容区域：图片反推和生成 -->
 15 |         <div class="row mb-4">
 16 |             <!-- 左侧：图片上传和提示词输入 -->
 17 |             <div class="col-md-6">
 18 |                 <div class="card mb-4">
 19 |                     <div class="card-header">
 20 |                         <h3 class="card-title">图片上传</h3>
 21 |                     </div>
 22 |                     <div class="card-body d-flex flex-column">
 23 |                         <!-- 文件拖放区域 -->
 24 |                         <div id="file_drop_area" class="file-drop-area mb-3 flex-grow-1" style="height: 400px; min-height: 400px; max-height: 400px; position: relative;">
 25 |                             <input type="file" id="file_input" class="file-input" accept=".png,.jpg,.jpeg,.gif,.bmp" />
 26 |                             
 27 |                             <!-- 拖放提示 -->
 28 |                             <div id="drop_placeholder" class="d-flex flex-column justify-content-center align-items-center h-full">
 29 |                                 <div class="feature-icon">📁</div>
 30 |                                 <p>拖放图片到此处，或点击此处上传图片</p>
 31 |                                 <p class="text-muted mt-2">(支持 PNG、JPG、JPEG、GIF、BMP 格式)</p>
 32 |                             </div>
 33 |                             
 34 |                             <!-- 图片预览区域 -->
 35 |                             <div id="image_preview" style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent;">
 36 |                                 <img id="preview_img" src="" alt="预览图片" style="max-width: 100%; max-height: 100%; object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
 37 |                             </div>
 38 |                             <!-- URL图片预览区域 -->
 39 |                             <div id="url_image_preview" style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent;">
 40 |                                 <img id="url_preview_img" src="" alt="URL预览图片" style="max-width: 100%; max-height: 100%; object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
 41 |                             </div>
 42 |                             
 43 |                             <!-- 上传成功信息 -->
 44 |                             <div id="uploaded_file_info" style="display: none; position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; background-color: rgba(255, 255, 255, 0.8); padding: 5px;">
 45 |                                 <p id="file_name" class="mb-0">已上传：</p>
 46 |                             </div>
 47 |                         </div>
 48 | 
 49 |                         <!-- 上传进度条 -->
 50 |                         <div id="upload_progress_container" style="display: none;">
 51 |                             <div class="progress">
 52 |                                 <div id="upload_progress_bar" class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
 53 |                             </div>
 54 |                         </div>
 55 | 
 56 | 
 57 | 
 58 |                         <!-- 操作按钮 -->
 59 |                         <div class="d-flex gap-2">
 60 |                             <button id="analyze_and_generate" class="btn btn-success w-100" disabled>反推并生成</button>
 61 |                         </div>
 62 |                     </div>
 63 |                 </div>
 64 | 
 65 | 
 66 |             </div>
 67 | 
 68 |             <!-- 右侧：分析结果和图像生成结果 -->
 69 |             <div class="col-md-6">
 70 | 
 71 | 
 72 |                 <!-- 图像生成结果 -->
 73 |                 <div class="card">
 74 |                     <div class="card-header">
 75 |                         <h3 class="card-title">生成预览</h3>
 76 |                     </div>
 77 |                     <div class="card-body d-flex flex-column">
 78 |                         <!-- 排队信息显示区域 -->
 79 |                         <div id="queue_info" class="mb-3 p-3 bg-info text-white rounded d-none">
 80 |                             <h5 class="mb-1">正在处理中</h5>
 81 |                             <p id="queue_detail" class="mb-2">正在获取排队信息...</p>
 82 |                             <!-- 进度条 -->
 83 |                             <div class="progress" style="height: 20px; border-radius: 10px; background-color: rgba(255, 255, 255, 0.3);">
 84 |                                 <div id="progress_bar" class="progress-bar bg-white" role="progressbar" style="width: 0%; border-radius: 10px; display: none;"></div>
 85 |                             </div>
 86 |                         </div>
 87 |                         
 88 |                         <!-- 主预览区域 -->
 89 |                         <div id="main_preview_area" class="flex-grow-1" style="background-color: #f8f9fa; border-radius: 4px; padding: 10px; height: 400px; min-height: 400px; max-height: 400px; display: flex; justify-content: center; align-items: center;">
 90 |                             <div class="d-flex justify-content-center align-items-center text-muted">
 91 |                                 选择下方缩略图查看
 92 |                             </div>
 93 |                         </div>
 94 |                         
 95 |                         <!-- 缩略图选择区域 -->
 96 |                         <div id="thumbnails_container" class="mt-3" style="display: flex; gap: 10px; justify-content: center; overflow-x: auto;">
 97 |                             <!-- 缩略图将在这里动态生成 -->
 98 |                         </div>
 99 |                     </div>
100 |                 </div>
101 |             </div>
102 |         </div>
103 | 
104 |     </div>
105 | 
106 |     <!-- 关于模态框 -->
107 |     <div class="modal fade" id="about_modal" tabindex="-1" aria-labelledby="about_modal_label" aria-hidden="true">
108 |         <div class="modal-dialog">
109 |             <div class="modal-content">
110 |                 <div class="modal-header">
111 |                     <h5 class="modal-title" id="about_modal_label">关于 Gua Step3反推+魔搭生图</h5>
112 |                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
113 |                 </div>
114 |                 <div class="modal-body">
115 |                     <p>Gua Step3反推+魔搭生图是一款基于 Step3 模型的图片内容分析与魔搭图片生成工具。</p>
116 |                     <p class="mt-2"><strong>功能特点：</strong></p>
117 |                     <ul>
118 |                         <li>支持拖放上传图片</li>
119 |                         <li>自动分析图片内容并生成详细描述</li>
120 |                         <li>可保存和管理 API Key</li>
121 |                         <li>提供操作日志记录</li>
122 |                     </ul>
123 |                     <p class="mt-2 text-muted">注意：使用前请确保您已获得有效的 API Key。</p>
124 |                 </div>
125 |                 <div class="modal-footer">
126 |                     <button type="button" class="btn btn-primary" data-bs-dismiss="modal">关闭</button>
127 |                 </div>
128 |             </div>
129 |         </div>
130 |     </div>
131 | 
132 |     <script src="/static/js/utils.js"></script>
133 |     <script src="/static/js/ui.js"></script>
134 |     <script src="/static/js/api.js"></script>
135 |     <script src="/static/js/main.js"></script>
136 | </body>
137 | </html>


--------------------------------------------------------------------------------
/extension/scripts/utils.js:
--------------------------------------------------------------------------------
  1 | // 工具函数库
  2 | class Utils {
  3 |     /**
  4 |      * 验证文件类型和大小
  5 |      * @param {File} file - 要验证的文件
  6 |      * @returns {Object} - 验证结果 {valid: boolean, error: string}
  7 |      */
  8 |     static validateFile(file) {
  9 |         if (!file) {
 10 |             return { valid: false, error: '请选择文件' };
 11 |         }
 12 |         
 13 |         // 检查文件大小
 14 |         if (file.size > CONFIG.UPLOAD.MAX_SIZE) {
 15 |             return { valid: false, error: CONFIG.ERRORS.FILE_TOO_LARGE };
 16 |         }
 17 |         
 18 |         // 检查文件类型
 19 |         if (!CONFIG.UPLOAD.ALLOWED_TYPES.includes(file.type)) {
 20 |             return { valid: false, error: CONFIG.ERRORS.INVALID_FILE_TYPE };
 21 |         }
 22 |         
 23 |         // 检查文件扩展名
 24 |         const extension = '.' + file.name.split('.').pop().toLowerCase();
 25 |         if (!CONFIG.UPLOAD.ALLOWED_EXTENSIONS.includes(extension)) {
 26 |             return { valid: false, error: CONFIG.ERRORS.INVALID_FILE_TYPE };
 27 |         }
 28 |         
 29 |         return { valid: true };
 30 |     }
 31 |     
 32 |     /**
 33 |      * 格式化文件大小
 34 |      * @param {number} bytes - 字节数
 35 |      * @returns {string} - 格式化后的大小
 36 |      */
 37 |     static formatFileSize(bytes) {
 38 |         if (bytes === 0) return '0 Bytes';
 39 |         
 40 |         const k = 1024;
 41 |         const sizes = ['Bytes', 'KB', 'MB', 'GB'];
 42 |         const i = Math.floor(Math.log(bytes) / Math.log(k));
 43 |         
 44 |         return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 45 |     }
 46 |     
 47 |     /**
 48 |      * 生成唯一ID
 49 |      * @returns {string} - 唯一ID
 50 |      */
 51 |     static generateId() {
 52 |         return Date.now().toString(36) + Math.random().toString(36).substr(2);
 53 |     }
 54 |     
 55 |     /**
 56 |      * 格式化时间戳
 57 |      * @param {number} timestamp - 时间戳
 58 |      * @returns {string} - 格式化后的时间
 59 |      */
 60 |     static formatTime(timestamp) {
 61 |         const date = new Date(timestamp);
 62 |         return date.toLocaleTimeString('zh-CN', {
 63 |             hour12: false,
 64 |             hour: '2-digit',
 65 |             minute: '2-digit',
 66 |             second: '2-digit'
 67 |         });
 68 |     }
 69 |     
 70 |     /**
 71 |      * 防抖函数
 72 |      * @param {Function} func - 要防抖的函数
 73 |      * @param {number} wait - 等待时间
 74 |      * @returns {Function} - 防抖后的函数
 75 |      */
 76 |     static debounce(func, wait) {
 77 |         let timeout;
 78 |         return function executedFunction(...args) {
 79 |             const later = () => {
 80 |                 clearTimeout(timeout);
 81 |                 func(...args);
 82 |             };
 83 |             clearTimeout(timeout);
 84 |             timeout = setTimeout(later, wait);
 85 |         };
 86 |     }
 87 |     
 88 |     /**
 89 |      * 节流函数
 90 |      * @param {Function} func - 要节流的函数
 91 |      * @param {number} limit - 限制时间
 92 |      * @returns {Function} - 节流后的函数
 93 |      */
 94 |     static throttle(func, limit) {
 95 |         let inThrottle;
 96 |         return function(...args) {
 97 |             if (!inThrottle) {
 98 |                 func.apply(this, args);
 99 |                 inThrottle = true;
100 |                 setTimeout(() => inThrottle = false, limit);
101 |             }
102 |         };
103 |     }
104 |     
105 |     /**
106 |      * 深拷贝对象
107 |      * @param {Object} obj - 要拷贝的对象
108 |      * @returns {Object} - 拷贝后的对象
109 |      */
110 |     static deepClone(obj) {
111 |         if (obj === null || typeof obj !== 'object') return obj;
112 |         if (obj instanceof Date) return new Date(obj.getTime());
113 |         if (obj instanceof Array) return obj.map(item => Utils.deepClone(item));
114 |         if (typeof obj === 'object') {
115 |             const clonedObj = {};
116 |             for (const key in obj) {
117 |                 if (obj.hasOwnProperty(key)) {
118 |                     clonedObj[key] = Utils.deepClone(obj[key]);
119 |                 }
120 |             }
121 |             return clonedObj;
122 |         }
123 |     }
124 |     
125 |     /**
126 |      * 检查是否为有效的URL
127 |      * @param {string} url - 要检查的URL
128 |      * @returns {boolean} - 是否有效
129 |      */
130 |     static isValidUrl(url) {
131 |         try {
132 |             new URL(url);
133 |             return true;
134 |         } catch {
135 |             return false;
136 |         }
137 |     }
138 |     
139 |     /**
140 |      * 转义HTML字符
141 |      * @param {string} text - 要转义的文本
142 |      * @returns {string} - 转义后的文本
143 |      */
144 |     static escapeHtml(text) {
145 |         const div = document.createElement('div');
146 |         div.textContent = text;
147 |         return div.innerHTML;
148 |     }
149 |     
150 |     /**
151 |      * 创建图片预览URL
152 |      * @param {File} file - 图片文件
153 |      * @returns {Promise<string>} - 预览URL
154 |      */
155 |     static createImagePreview(file) {
156 |         return new Promise((resolve, reject) => {
157 |             const reader = new FileReader();
158 |             reader.onload = e => resolve(e.target.result);
159 |             reader.onerror = reject;
160 |             reader.readAsDataURL(file);
161 |         });
162 |     }
163 |     
164 |     /**
165 |      * 压缩图片
166 |      * @param {File} file - 原始图片文件
167 |      * @param {number} maxWidth - 最大宽度
168 |      * @param {number} maxHeight - 最大高度
169 |      * @param {number} quality - 压缩质量 (0-1)
170 |      * @returns {Promise<Blob>} - 压缩后的图片
171 |      */
172 |     static compressImage(file, maxWidth = 800, maxHeight = 600, quality = 0.8) {
173 |         return new Promise((resolve, reject) => {
174 |             const canvas = document.createElement('canvas');
175 |             const ctx = canvas.getContext('2d');
176 |             const img = new Image();
177 |             
178 |             img.onload = () => {
179 |                 // 计算新尺寸
180 |                 let { width, height } = img;
181 |                 
182 |                 if (width > height) {
183 |                     if (width > maxWidth) {
184 |                         height = (height * maxWidth) / width;
185 |                         width = maxWidth;
186 |                     }
187 |                 } else {
188 |                     if (height > maxHeight) {
189 |                         width = (width * maxHeight) / height;
190 |                         height = maxHeight;
191 |                     }
192 |                 }
193 |                 
194 |                 canvas.width = width;
195 |                 canvas.height = height;
196 |                 
197 |                 // 绘制压缩后的图片
198 |                 ctx.drawImage(img, 0, 0, width, height);
199 |                 
200 |                 canvas.toBlob(resolve, file.type, quality);
201 |             };
202 |             
203 |             img.onerror = reject;
204 |             img.src = URL.createObjectURL(file);
205 |         });
206 |     }
207 |     
208 |     /**
209 |      * 等待指定时间
210 |      * @param {number} ms - 等待时间 (毫秒)
211 |      * @returns {Promise} - Promise对象
212 |      */
213 |     static sleep(ms) {
214 |         return new Promise(resolve => setTimeout(resolve, ms));
215 |     }
216 |     
217 |     /**
218 |      * 重试函数
219 |      * @param {Function} fn - 要重试的函数
220 |      * @param {number} retries - 重试次数
221 |      * @param {number} delay - 重试间隔 (毫秒)
222 |      * @returns {Promise} - Promise对象
223 |      */
224 |     static async retry(fn, retries = 3, delay = 1000) {
225 |         try {
226 |             return await fn();
227 |         } catch (error) {
228 |             if (retries > 0) {
229 |                 await Utils.sleep(delay);
230 |                 return Utils.retry(fn, retries - 1, delay);
231 |             }
232 |             throw error;
233 |         }
234 |     }
235 | }
236 | 
237 | // 导出工具类
238 | if (typeof module !== 'undefined' && module.exports) {
239 |     module.exports = Utils;
240 | } else if (typeof window !== 'undefined') {
241 |     window.Utils = Utils;
242 | }


--------------------------------------------------------------------------------
/static/js/main.js:
--------------------------------------------------------------------------------
  1 | // static/js/main.js
  2 | 
  3 | document.addEventListener('DOMContentLoaded', function() {
  4 |     // 元素引用
  5 |     const fileInput = document.getElementById('file_input');
  6 |     const fileDropArea = document.getElementById('file_drop_area');
  7 |     const imagePreview = document.getElementById('image_preview');
  8 |     const previewImg = document.getElementById('preview_img');
  9 |     const urlImagePreview = document.getElementById('url_image_preview');
 10 |     const urlPreviewImg = document.getElementById('url_preview_img');
 11 |     const dropPlaceholder = document.getElementById('drop_placeholder');
 12 |     const uploadedFileInfo = document.getElementById('uploaded_file_info');
 13 |     const analyzeAndGenerateButton = document.getElementById('analyze_and_generate');
 14 | 
 15 |     // =========================================================================
 16 |     // 初始化逻辑
 17 |     // =========================================================================
 18 | 
 19 |     // 检查URL中是否包含imageUrl参数
 20 |     const urlParams = new URLSearchParams(window.location.search);
 21 |     const imageUrlFromParam = urlParams.get('imageUrl');
 22 | 
 23 |     if (imageUrlFromParam) {
 24 |         // 如果有imageUrl参数，则显示URL图片预览区域，隐藏文件上传区域
 25 |         if (dropPlaceholder) dropPlaceholder.style.display = 'none';
 26 |         if (uploadedFileInfo) uploadedFileInfo.style.display = 'none';
 27 |         if (imagePreview) imagePreview.style.display = 'none';
 28 |         if (fileInput) fileInput.style.display = 'none';
 29 |         if (fileDropArea) fileDropArea.style.pointerEvents = 'none'; // 禁用拖放区域
 30 | 
 31 |         if (urlImagePreview) urlImagePreview.style.display = 'block';
 32 |         if (urlPreviewImg) urlPreviewImg.src = imageUrlFromParam;
 33 |         if (analyzeAndGenerateButton) analyzeAndGenerateButton.disabled = false;
 34 | 
 35 |         // 自动触发分析和生成
 36 |         analyzeAndGenerate(imageUrlFromParam);
 37 |     } else {
 38 |         // 否则，确保文件上传区域是可见的
 39 |         if (dropPlaceholder) dropPlaceholder.style.display = 'flex';
 40 |         if (urlImagePreview) urlImagePreview.style.display = 'none';
 41 |         if (fileInput) fileInput.style.display = 'block';
 42 |         if (fileDropArea) fileDropArea.style.pointerEvents = 'auto';
 43 |     }
 44 | 
 45 |     // =========================================================================
 46 |     // 事件监听
 47 |     // =========================================================================
 48 | 
 49 |     // 1. 点击上传区域触发文件选择
 50 |     if (fileDropArea) {
 51 |         fileDropArea.addEventListener('click', (e) => {
 52 |             // 如果点击的是图片预览区域，不触发文件选择
 53 |             if (e.target.closest('#image_preview')) {
 54 |                 return;
 55 |             }
 56 |             fileInput.value = ''; // 允许重复选择相同文件
 57 |             fileInput.click();
 58 |         });
 59 |     }
 60 | 
 61 |     // 2. 点击预览图片时也能重新选择文件
 62 |     if (imagePreview) {
 63 |         imagePreview.addEventListener('click', (e) => {
 64 |             e.stopPropagation(); // 阻止事件冒泡
 65 |             fileInput.value = '';
 66 |             fileInput.click();
 67 |         });
 68 |     }
 69 | 
 70 |     // 3. 处理文件选择
 71 |     if (fileInput) {
 72 |         fileInput.addEventListener('change', (e) => {
 73 |             if (e.target.files && e.target.files[0]) {
 74 |                 handleFileUpload(e.target.files[0]);
 75 |             }
 76 |         });
 77 |     }
 78 | 
 79 |     // 4. 处理文件拖放
 80 |     if (fileDropArea) {
 81 |         // 防止浏览器默认行为
 82 |         ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
 83 |             fileDropArea.addEventListener(eventName, preventDefaults, false);
 84 |         });
 85 | 
 86 |         // 高亮/取消高亮拖放区域
 87 |         ['dragenter', 'dragover'].forEach(eventName => {
 88 |             fileDropArea.addEventListener(eventName, () => fileDropArea.classList.add('active'), false);
 89 |         });
 90 |         ['dragleave', 'drop'].forEach(eventName => {
 91 |             fileDropArea.addEventListener(eventName, () => fileDropArea.classList.remove('active'), false);
 92 |         });
 93 | 
 94 |         // 处理拖放的文件
 95 |         fileDropArea.addEventListener('drop', (e) => {
 96 |             const dt = e.dataTransfer;
 97 |             const files = dt.files;
 98 |             if (files && files[0]) {
 99 |                 handleFileUpload(files[0]);
100 |             }
101 |         }, false);
102 |     }
103 | 
104 |     // 5. 点击 "反推并生成" 按钮
105 |     if (analyzeAndGenerateButton) {
106 |         analyzeAndGenerateButton.addEventListener('click', () => analyzeAndGenerate());
107 |     }
108 | 
109 |     // =========================================================================
110 |     // 核心功能函数
111 |     // =========================================================================
112 | 
113 |     /**
114 |      * 处理文件上传的整个流程
115 |      * @param {File} file - 用户选择的文件
116 |      */
117 |     async function handleFileUpload(file) {
118 |         const uploadProgressContainer = document.getElementById('upload_progress_container');
119 |         const uploadProgressBar = document.getElementById('upload_progress_bar');
120 | 
121 |         // 验证文件
122 |         const validExtensions = ['image/png', 'image/jpeg', 'image/gif', 'image/bmp'];
123 |         if (!validExtensions.includes(file.type)) {
124 |             showToast('不支持的文件类型，请上传图片文件', 'danger');
125 | 
126 |             return;
127 |         }
128 |         if (file.size > 16 * 1024 * 1024) { // 16MB
129 |             showToast('文件太大，请上传小于16MB的图片', 'danger');
130 | 
131 |             return;
132 |         }
133 | 
134 |         // 显示进度条
135 |         if(uploadProgressContainer) uploadProgressContainer.style.display = 'block';
136 |         if(uploadProgressBar) uploadProgressBar.style.width = '0%';
137 |         if(analyzeAndGenerateButton) analyzeAndGenerateButton.disabled = true;
138 | 
139 | 
140 |         try {
141 |             // 定义上传进度回调
142 |             const onUploadProgress = (progressEvent) => {
143 |                 const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
144 |                 if(uploadProgressBar) uploadProgressBar.style.width = percentCompleted + '%';
145 |             };
146 | 
147 |             // 调用API上传文件
148 |             const data = await uploadFile(file, onUploadProgress);
149 | 
150 |             if (data.success) {
151 |                 const imageUrl = '/uploads/' + data.filename;
152 |                 showImagePreview(imageUrl); // from ui.js
153 |                 if (analyzeAndGenerateButton) analyzeAndGenerateButton.disabled = false;
154 | 
155 |                 showToast('文件上传成功！', 'success');
156 |             } else {
157 |                 throw new Error(data.error || '上传失败');
158 |             }
159 |         } catch (error) {
160 | 
161 |             showToast('上传文件时出错，请重试', 'danger');
162 |             if (analyzeAndGenerateButton) analyzeAndGenerateButton.disabled = true;
163 |         } finally {
164 |             if(uploadProgressContainer) uploadProgressContainer.style.display = 'none';
165 |         }
166 |     }
167 | 
168 |     /**
169 |      * 执行分析并生成图片的流程
170 |      * @param {string} [imageUrl] - 可选的图片URL，如果提供则从URL分析，否则从已上传图片分析
171 |      */
172 |     async function analyzeAndGenerate(imageUrl = null) {
173 |         let analysisResponse;
174 |         if (imageUrl) {
175 |             // 从URL分析图片
176 |             analysisResponse = await analyzeImageFromUrl(imageUrl); // from api.js
177 |         } else {
178 |             // 从已上传图片分析
179 |             analysisResponse = await analyzeImage(true); // from api.js
180 |         }
181 | 
182 |         // 2. 如果分析成功，则生成图片
183 |         if (analysisResponse && analysisResponse.success) {
184 |             const prompt = analysisResponse.prompt; // 注意这里是analysisResponse.prompt
185 | 
186 |             try {
187 |                 // 调用API生成图片 - 只传递prompt，让后端使用config中的默认配置
188 |                 const images = await generateQwenImage(prompt); // from api.js
189 |                 displayGeneratedImages(images); // from ui.js
190 | 
191 |                 showToast('图片生成成功！', 'success');
192 |             } catch (error) {
193 | 
194 |                 showToast('生成图片时出错：' + error.message, 'danger');
195 |             }
196 |         }
197 |     }
198 | 
199 |     function preventDefaults(e) {
200 |         e.preventDefault();
201 |         e.stopPropagation();
202 |     }
203 | 
204 | 
205 | });


--------------------------------------------------------------------------------
/extension/styles/popup.css:
--------------------------------------------------------------------------------
  1 | /* 基础样式 */
  2 | * {
  3 |     margin: 0;
  4 |     padding: 0;
  5 |     box-sizing: border-box;
  6 | }
  7 | 
  8 | body {
  9 |     width: 400px;
 10 |     min-height: 600px;
 11 |     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 12 |     background-color: #f8f9fa;
 13 |     color: #333;
 14 | }
 15 | 
 16 | .container {
 17 |     padding: 16px;
 18 | }
 19 | 
 20 | /* 头部样式 */
 21 | .header {
 22 |     display: flex;
 23 |     justify-content: space-between;
 24 |     align-items: center;
 25 |     margin-bottom: 16px;
 26 |     padding-bottom: 12px;
 27 |     border-bottom: 2px solid #007bff;
 28 | }
 29 | 
 30 | .header h1 {
 31 |     font-size: 16px;
 32 |     font-weight: 600;
 33 |     color: #007bff;
 34 | }
 35 | 
 36 | .settings-btn {
 37 |     background: none;
 38 |     border: none;
 39 |     font-size: 18px;
 40 |     cursor: pointer;
 41 |     padding: 4px;
 42 |     border-radius: 4px;
 43 |     transition: background-color 0.2s;
 44 | }
 45 | 
 46 | .settings-btn:hover {
 47 |     background-color: #e9ecef;
 48 | }
 49 | 
 50 | /* 主内容区域 */
 51 | .main-content {
 52 |     margin-bottom: 16px;
 53 | }
 54 | 
 55 | /* 上传区域 */
 56 | .upload-section {
 57 |     margin-bottom: 16px;
 58 | }
 59 | 
 60 | .file-drop-area {
 61 |     border: 2px dashed #007bff;
 62 |     border-radius: 8px;
 63 |     padding: 20px;
 64 |     text-align: center;
 65 |     cursor: pointer;
 66 |     transition: all 0.2s ease;
 67 |     position: relative;
 68 |     min-height: 120px;
 69 |     display: flex;
 70 |     align-items: center;
 71 |     justify-content: center;
 72 | }
 73 | 
 74 | .file-drop-area:hover {
 75 |     background-color: #e9f2ff;
 76 |     border-color: #0056b3;
 77 | }
 78 | 
 79 | .file-drop-area.active {
 80 |     background-color: #e9f2ff;
 81 |     border-color: #0056b3;
 82 | }
 83 | 
 84 | .file-input {
 85 |     position: absolute;
 86 |     width: 1px;
 87 |     height: 1px;
 88 |     opacity: 0;
 89 |     pointer-events: none;
 90 | }
 91 | 
 92 | .drop-placeholder {
 93 |     color: #007bff;
 94 | }
 95 | 
 96 | .feature-icon {
 97 |     font-size: 2rem;
 98 |     margin-bottom: 8px;
 99 | }
100 | 
101 | .drop-placeholder p {
102 |     margin: 4px 0;
103 |     font-size: 14px;
104 | }
105 | 
106 | .text-muted {
107 |     color: #6c757d;
108 |     font-size: 12px;
109 | }
110 | 
111 | .image-preview {
112 |     position: absolute;
113 |     top: 0;
114 |     left: 0;
115 |     width: 100%;
116 |     height: 100%;
117 |     display: flex;
118 |     align-items: center;
119 |     justify-content: center;
120 | }
121 | 
122 | .image-preview img {
123 |     max-width: 100%;
124 |     max-height: 100%;
125 |     object-fit: contain;
126 |     border-radius: 4px;
127 | }
128 | 
129 | /* 上传进度 */
130 | .upload-progress {
131 |     margin-top: 12px;
132 |     text-align: center;
133 | }
134 | 
135 | .progress-bar {
136 |     width: 100%;
137 |     height: 8px;
138 |     background-color: #e9ecef;
139 |     border-radius: 4px;
140 |     overflow: hidden;
141 |     margin-bottom: 4px;
142 | }
143 | 
144 | .progress-fill {
145 |     height: 100%;
146 |     background-color: #007bff;
147 |     transition: width 0.3s ease;
148 |     width: 0%;
149 | }
150 | 
151 | #progressText {
152 |     font-size: 12px;
153 |     color: #6c757d;
154 | }
155 | 
156 | /* 按钮样式 */
157 | .action-buttons {
158 |     margin-top: 12px;
159 | }
160 | 
161 | .btn {
162 |     width: 100%;
163 |     padding: 10px 16px;
164 |     border: none;
165 |     border-radius: 6px;
166 |     font-size: 14px;
167 |     font-weight: 600;
168 |     cursor: pointer;
169 |     transition: all 0.2s ease;
170 | }
171 | 
172 | .btn-primary {
173 |     background-color: #007bff;
174 |     color: white;
175 | }
176 | 
177 | .btn-primary:hover:not(:disabled) {
178 |     background-color: #0056b3;
179 | }
180 | 
181 | .btn-primary:disabled {
182 |     background-color: #6c757d;
183 |     cursor: not-allowed;
184 | }
185 | 
186 | .btn-secondary {
187 |     background-color: #6c757d;
188 |     color: white;
189 | }
190 | 
191 | .btn-secondary:hover {
192 |     background-color: #545b62;
193 | }
194 | 
195 | /* 结果区域 */
196 | .result-section {
197 |     margin-bottom: 16px;
198 | }
199 | 
200 | .queue-info {
201 |     background-color: #17a2b8;
202 |     color: white;
203 |     padding: 12px;
204 |     border-radius: 6px;
205 |     margin-bottom: 12px;
206 | }
207 | 
208 | .queue-info h3 {
209 |     font-size: 14px;
210 |     margin-bottom: 4px;
211 | }
212 | 
213 | .queue-info p {
214 |     font-size: 12px;
215 |     margin-bottom: 8px;
216 | }
217 | 
218 | .main-preview {
219 |     background-color: #e9ecef;
220 |     border-radius: 6px;
221 |     height: 200px;
222 |     display: flex;
223 |     align-items: center;
224 |     justify-content: center;
225 |     margin-bottom: 12px;
226 |     cursor: pointer;
227 | }
228 | 
229 | .preview-placeholder {
230 |     color: #6c757d;
231 |     font-size: 14px;
232 | }
233 | 
234 | .main-preview img {
235 |     max-width: 100%;
236 |     max-height: 100%;
237 |     object-fit: contain;
238 |     border-radius: 4px;
239 | }
240 | 
241 | .thumbnails-container {
242 |     display: flex;
243 |     gap: 8px;
244 |     overflow-x: auto;
245 |     padding: 4px 0;
246 | }
247 | 
248 | .thumbnail-wrapper {
249 |     flex-shrink: 0;
250 |     cursor: pointer;
251 |     border: 2px solid transparent;
252 |     border-radius: 4px;
253 |     padding: 2px;
254 |     transition: border-color 0.2s;
255 | }
256 | 
257 | .thumbnail-wrapper.selected {
258 |     border-color: #007bff;
259 | }
260 | 
261 | .thumbnail-wrapper img {
262 |     width: 40px;
263 |     height: 40px;
264 |     object-fit: cover;
265 |     border-radius: 2px;
266 | }
267 | 
268 | 
269 | 
270 | /* 设置面板 */
271 | .settings-panel {
272 |     position: fixed;
273 |     top: 0;
274 |     left: 0;
275 |     width: 100%;
276 |     height: 100%;
277 |     background-color: white;
278 |     z-index: 1000;
279 |     overflow-y: auto;
280 | }
281 | 
282 | .settings-header {
283 |     display: flex;
284 |     justify-content: space-between;
285 |     align-items: center;
286 |     padding: 16px;
287 |     border-bottom: 1px solid #dee2e6;
288 |     background-color: #007bff;
289 |     color: white;
290 | }
291 | 
292 | .settings-header h3 {
293 |     font-size: 16px;
294 |     margin: 0;
295 | }
296 | 
297 | .close-btn {
298 |     background: none;
299 |     border: none;
300 |     color: white;
301 |     font-size: 24px;
302 |     cursor: pointer;
303 |     padding: 0;
304 |     width: 30px;
305 |     height: 30px;
306 |     display: flex;
307 |     align-items: center;
308 |     justify-content: center;
309 |     border-radius: 4px;
310 | }
311 | 
312 | .close-btn:hover {
313 |     background-color: rgba(255, 255, 255, 0.1);
314 | }
315 | 
316 | .settings-content {
317 |     padding: 16px;
318 | }
319 | 
320 | .setting-item {
321 |     margin-bottom: 16px;
322 | }
323 | 
324 | .setting-item label {
325 |     display: block;
326 |     margin-bottom: 4px;
327 |     font-size: 14px;
328 |     font-weight: 500;
329 |     color: #495057;
330 | }
331 | 
332 | .setting-item input,
333 | .setting-item textarea {
334 |     width: 100%;
335 |     padding: 8px 12px;
336 |     border: 1px solid #ced4da;
337 |     border-radius: 4px;
338 |     font-size: 14px;
339 |     font-family: inherit;
340 | }
341 | 
342 | .setting-item input:focus,
343 | .setting-item textarea:focus {
344 |     outline: none;
345 |     border-color: #007bff;
346 |     box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
347 | }
348 | 
349 | .setting-item textarea {
350 |     resize: vertical;
351 |     min-height: 80px;
352 | }
353 | 
354 | .settings-actions {
355 |     display: flex;
356 |     gap: 8px;
357 |     margin-top: 20px;
358 | }
359 | 
360 | .settings-actions .btn {
361 |     flex: 1;
362 | }
363 | 
364 | /* Toast 通知 */
365 | .toast-container {
366 |     position: fixed;
367 |     top: 16px;
368 |     right: 16px;
369 |     z-index: 2000;
370 | }
371 | 
372 | .toast {
373 |     background-color: #333;
374 |     color: white;
375 |     padding: 12px 16px;
376 |     border-radius: 6px;
377 |     margin-bottom: 8px;
378 |     font-size: 14px;
379 |     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
380 |     animation: slideIn 0.3s ease;
381 |     max-width: 300px;
382 | }
383 | 
384 | .toast.success {
385 |     background-color: #28a745;
386 | }
387 | 
388 | .toast.error {
389 |     background-color: #dc3545;
390 | }
391 | 
392 | .toast.warning {
393 |     background-color: #ffc107;
394 |     color: #212529;
395 | }
396 | 
397 | .toast.info {
398 |     background-color: #17a2b8;
399 | }
400 | 
401 | @keyframes slideIn {
402 |     from {
403 |         transform: translateX(100%);
404 |         opacity: 0;
405 |     }
406 |     to {
407 |         transform: translateX(0);
408 |         opacity: 1;
409 |     }
410 | }
411 | 
412 | /* 滚动条样式 */
413 | .thumbnails-container::-webkit-scrollbar {
414 |     width: 6px;
415 |     height: 6px;
416 | }
417 | 
418 | .thumbnails-container::-webkit-scrollbar-track {
419 |     background: #f1f1f1;
420 |     border-radius: 3px;
421 | }
422 | 
423 | .thumbnails-container::-webkit-scrollbar-thumb {
424 |     background: #888;
425 |     border-radius: 3px;
426 | }
427 | 
428 | .thumbnails-container::-webkit-scrollbar-thumb:hover {
429 |     background: #555;
430 | }


--------------------------------------------------------------------------------
/extension/test.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>插件测试页面</title>
  7 |     <style>
  8 |         body {
  9 |             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 10 |             max-width: 800px;
 11 |             margin: 0 auto;
 12 |             padding: 20px;
 13 |             background-color: #f8f9fa;
 14 |         }
 15 |         .container {
 16 |             background: white;
 17 |             padding: 30px;
 18 |             border-radius: 10px;
 19 |             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 20 |         }
 21 |         h1 {
 22 |             color: #007bff;
 23 |             text-align: center;
 24 |             margin-bottom: 30px;
 25 |         }
 26 |         .section {
 27 |             margin-bottom: 30px;
 28 |             padding: 20px;
 29 |             border: 1px solid #dee2e6;
 30 |             border-radius: 8px;
 31 |         }
 32 |         .section h2 {
 33 |             color: #495057;
 34 |             margin-bottom: 15px;
 35 |         }
 36 |         .status {
 37 |             padding: 10px;
 38 |             border-radius: 5px;
 39 |             margin: 10px 0;
 40 |         }
 41 |         .status.success { background-color: #d4edda; color: #155724; }
 42 |         .status.error { background-color: #f8d7da; color: #721c24; }
 43 |         .status.warning { background-color: #fff3cd; color: #856404; }
 44 |         .btn {
 45 |             background-color: #007bff;
 46 |             color: white;
 47 |             border: none;
 48 |             padding: 10px 20px;
 49 |             border-radius: 5px;
 50 |             cursor: pointer;
 51 |             margin: 5px;
 52 |         }
 53 |         .btn:hover { background-color: #0056b3; }
 54 |         .btn:disabled { background-color: #6c757d; cursor: not-allowed; }
 55 |         pre {
 56 |             background-color: #f8f9fa;
 57 |             padding: 15px;
 58 |             border-radius: 5px;
 59 |             overflow-x: auto;
 60 |             font-size: 12px;
 61 |         }
 62 |         .test-image {
 63 |             max-width: 200px;
 64 |             border: 2px dashed #007bff;
 65 |             border-radius: 8px;
 66 |             padding: 10px;
 67 |             margin: 10px 0;
 68 |         }
 69 |     </style>
 70 | </head>
 71 | <body>
 72 |     <div class="container">
 73 |         <h1>🎨 Gua Step3反推+魔搭生图 插件测试</h1>
 74 |         
 75 |         <!-- 插件状态检查 -->
 76 |         <div class="section">
 77 |             <h2>1. 插件状态检查</h2>
 78 |             <div id="extensionStatus" class="status warning">检查中...</div>
 79 |             <button class="btn" onclick="checkExtension()">重新检查插件</button>
 80 |         </div>
 81 |         
 82 |         <!-- 后端服务检查 -->
 83 |         <div class="section">
 84 |             <h2>2. 后端服务检查</h2>
 85 |             <div id="serverStatus" class="status warning">检查中...</div>
 86 |             <button class="btn" onclick="checkServer()">检查服务器连接</button>
 87 |             <div style="margin-top: 10px;">
 88 |                 <small>后端服务地址: <code>http://localhost:5000</code></small>
 89 |             </div>
 90 |         </div>
 91 |         
 92 |         <!-- 测试图片 -->
 93 |         <div class="section">
 94 |             <h2>3. 测试图片</h2>
 95 |             <p>可以使用以下测试图片来验证插件功能：</p>
 96 |             <div style="display: flex; gap: 20px; flex-wrap: wrap;">
 97 |                 <div>
 98 |                     <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZTllY2VmIi8+PHBvbHlnb24gcG9pbnRzPSI1MCwxMjAgODAsMTIwIDEwMCw4MCA2MCw0MCA0MCw2MCAyMCw4MCIgZmlsbD0iIzZjNzU3ZCIvPjxjaXJjbGUgY3g9IjE2MCIgY3k9IjMwIiByPSIxNSIgZmlsbD0iI2ZmYzEwNyIvPjx0ZXh0IHg9IjEwMCIgeT0iMTQwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTIiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiM0OTUwNTciPuWxseWzsOmjjuaZrzwvdGV4dD48L3N2Zz4=" 
 99 |                          class="test-image" alt="山峰风景">
100 |                     <p><small>测试图片1: 山峰风景</small></p>
101 |                 </div>
102 |                 <div>
103 |                     <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjhmOWZhIi8+PGNpcmNsZSBjeD0iMTAwIiBjeT0iNzUiIHI9IjQwIiBmaWxsPSIjMDA3YmZmIiBvcGFjaXR5PSIwLjciLz48Y2lyY2xlIGN4PSI2MCIgY3k9IjYwIiByPSIyNSIgZmlsbD0iIzI4YTc0NSIgb3BhY2l0eT0iMC44Ii8+PGNpcmNsZSBjeD0iMTQwIiBjeT0iNTAiIHI9IjIwIiBmaWxsPSIjZGMzNTQ1IiBvcGFjaXR5PSIwLjciLz48dGV4dCB4PSIxMDAiIHk9IjE0MCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEyIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNDk1MDU3Ij7lnZDkvZPlm77moYg8L3RleHQ+PC9zdmc+" 
104 |                          class="test-image" alt="抽象图形">
105 |                     <p><small>测试图片2: 抽象图形</small></p>
106 |                 </div>
107 |             </div>
108 |             <p><small>💡 提示: 右键保存图片，然后在插件中上传测试</small></p>
109 |         </div>
110 |         
111 |         <!-- 使用说明 -->
112 |         <div class="section">
113 |             <h2>4. 使用说明</h2>
114 |             <ol>
115 |                 <li><strong>安装插件</strong>: 在Chrome中加载 <code>extension</code> 文件夹</li>
116 |                 <li><strong>启动后端</strong>: 运行 <code>python web_app.py</code></li>
117 |                 <li><strong>配置设置</strong>: 在插件中设置OpenAI API Key和ModelScope Cookie</li>
118 |                 <li><strong>测试功能</strong>: 上传图片并点击"反推并生成"</li>
119 |             </ol>
120 |         </div>
121 |         
122 |         <!-- 调试信息 -->
123 |         <div class="section">
124 |             <h2>5. 调试信息</h2>
125 |             <button class="btn" onclick="showDebugInfo()">显示调试信息</button>
126 |             <button class="btn" onclick="clearDebugInfo()">清除信息</button>
127 |             <pre id="debugInfo">点击"显示调试信息"查看详细信息...</pre>
128 |         </div>
129 |     </div>
130 | 
131 |     <script>
132 |         // 检查插件是否已安装
133 |         function checkExtension() {
134 |             const statusDiv = document.getElementById('extensionStatus');
135 |             
136 |             // 检查是否在Chrome扩展环境中
137 |             if (typeof chrome !== 'undefined' && chrome.runtime && chrome.runtime.id) {
138 |                 statusDiv.className = 'status success';
139 |                 statusDiv.textContent = '✅ 插件环境检测成功 - 扩展ID: ' + chrome.runtime.id;
140 |             } else {
141 |                 statusDiv.className = 'status error';
142 |                 statusDiv.textContent = '❌ 未检测到Chrome扩展环境，请确保已正确安装插件';
143 |             }
144 |         }
145 |         
146 |         // 检查后端服务
147 |         async function checkServer() {
148 |             const statusDiv = document.getElementById('serverStatus');
149 |             statusDiv.className = 'status warning';
150 |             statusDiv.textContent = '🔄 正在检查服务器连接...';
151 |             
152 |             try {
153 |                 const response = await fetch('http://localhost:5000/health', {
154 |                     method: 'GET',
155 |                     mode: 'cors'
156 |                 });
157 |                 
158 |                 if (response.ok) {
159 |                     const data = await response.json();
160 |                     statusDiv.className = 'status success';
161 |                     statusDiv.textContent = '✅ 后端服务连接正常 - ' + (data.message || '服务运行中');
162 |                 } else {
163 |                     statusDiv.className = 'status error';
164 |                     statusDiv.textContent = '❌ 后端服务响应异常 - HTTP ' + response.status;
165 |                 }
166 |             } catch (error) {
167 |                 statusDiv.className = 'status error';
168 |                 statusDiv.textContent = '❌ 无法连接到后端服务 - ' + error.message;
169 |             }
170 |         }
171 |         
172 |         // 显示调试信息
173 |         function showDebugInfo() {
174 |             const debugInfo = document.getElementById('debugInfo');
175 |             const info = {
176 |                 timestamp: new Date().toLocaleString(),
177 |                 userAgent: navigator.userAgent,
178 |                 location: window.location.href,
179 |                 chromeExtension: typeof chrome !== 'undefined' && chrome.runtime ? {
180 |                     id: chrome.runtime.id || 'N/A',
181 |                     version: chrome.runtime.getManifest ? chrome.runtime.getManifest().version : 'N/A'
182 |                 } : 'Not available',
183 |                 localStorage: {
184 |                     available: typeof localStorage !== 'undefined',
185 |                     items: localStorage ? Object.keys(localStorage).length : 0
186 |                 },
187 |                 permissions: {
188 |                     storage: typeof chrome !== 'undefined' && chrome.storage ? 'Available' : 'Not available',
189 |                     activeTab: 'Unknown'
190 |                 }
191 |             };
192 |             
193 |             debugInfo.textContent = JSON.stringify(info, null, 2);
194 |         }
195 |         
196 |         // 清除调试信息
197 |         function clearDebugInfo() {
198 |             document.getElementById('debugInfo').textContent = '点击"显示调试信息"查看详细信息...';
199 |         }
200 |         
201 |         // 页面加载时自动检查
202 |         window.addEventListener('load', () => {
203 |             checkExtension();
204 |             checkServer();
205 |         });
206 |         
207 |         // 定期检查服务器状态
208 |         setInterval(checkServer, 30000); // 每30秒检查一次
209 |     </script>
210 | </body>
211 | </html>


--------------------------------------------------------------------------------
/static/js/ui.js:
--------------------------------------------------------------------------------
  1 | // 全局变量
  2 | let currentImageUrl = null;
  3 | 
  4 | 
  5 | 
  6 | // 显示Toast通知
  7 | function showToast(message, type = 'info') {
  8 |     const toastContainer = document.getElementById('toast_container');
  9 |     if (!toastContainer) return;
 10 | 
 11 |     const toast = document.createElement('div');
 12 |     toast.className = `toast align-items-center text-white bg-${type} border-0`;
 13 |     toast.role = 'alert';
 14 |     toast.ariaLive = 'assertive';
 15 |     toast.ariaAtomic = 'true';
 16 | 
 17 |     toast.innerHTML = `
 18 |         <div class="d-flex">
 19 |             <div class="toast-body">
 20 |                 ${message}
 21 |             </div>
 22 |             <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
 23 |         </div>
 24 |     `;
 25 | 
 26 |     toastContainer.appendChild(toast);
 27 | 
 28 |     const toastBootstrap = new bootstrap.Toast(toast);
 29 |     toastBootstrap.show();
 30 | 
 31 |     toast.addEventListener('hidden.bs.toast', function () {
 32 |         toastContainer.removeChild(toast);
 33 |     });
 34 | }
 35 | 
 36 | 
 37 | // 显示图片预览
 38 | function showImagePreview(imageUrl) {
 39 |     currentImageUrl = imageUrl;
 40 |     
 41 |     // 获取预览元素
 42 |     const dropPlaceholder = document.getElementById('drop_placeholder');
 43 |     const imagePreview = document.getElementById('image_preview');
 44 |     const previewImg = document.getElementById('preview_img');
 45 |     const uploadedFileInfo = document.getElementById('uploaded_file_info');
 46 |     
 47 |     // 设置图片源
 48 |     previewImg.src = ''; // 先清空避免缓存问题
 49 |     previewImg.src = imageUrl;
 50 |     
 51 |     // 图片加载成功后显示
 52 |     previewImg.onload = function() {
 53 |         // 重新获取DOM元素引用并更新UI
 54 |         const dropPlaceholder = document.getElementById('drop_placeholder');
 55 |         const imagePreview = document.getElementById('image_preview');
 56 |         const uploadedFileInfo = document.getElementById('uploaded_file_info');
 57 |         
 58 |         // 显示预览图片，隐藏拖放提示和所有文字图标
 59 |         dropPlaceholder.style.display = 'none';
 60 |         imagePreview.style.display = 'block';
 61 |         // 确保完全隐藏上传文件信息
 62 |         uploadedFileInfo.style.display = 'none';
 63 |         uploadedFileInfo.innerHTML = '';
 64 |         
 65 | 
 66 |     };
 67 |     
 68 |     // 图片加载失败处理
 69 |     previewImg.onerror = function() {
 70 |         // 重新获取DOM元素引用
 71 |         const dropPlaceholder = document.getElementById('drop_placeholder');
 72 |         const imagePreview = document.getElementById('image_preview');
 73 |         const uploadedFileInfo = document.getElementById('uploaded_file_info');
 74 |         
 75 |         // 显示错误信息
 76 |         dropPlaceholder.innerHTML = '<div class="feature-icon">❌</div><p>无法加载预览图片</p><p>请重新选择图片文件</p>';
 77 |         dropPlaceholder.style.display = 'flex';
 78 |         imagePreview.style.display = 'none';
 79 |         uploadedFileInfo.style.display = 'none';
 80 | 
 81 |     };
 82 | }
 83 | 
 84 | // 显示图片全屏预览 - 支持ESC退出和左右键切换
 85 | function showImageFullscreen(imageUrl) {
 86 |     // 设置全局状态，表示当前正在查看大图
 87 |     window.isFullscreenImageOpen = true;
 88 |     
 89 |     // 获取当前图片在生成列表中的索引
 90 |     let currentImageIndex = 0;
 91 |     if (window.generatedImages && window.generatedImages.length > 0) {
 92 |         currentImageIndex = window.generatedImages.indexOf(imageUrl);
 93 |         if (currentImageIndex === -1) {
 94 |             currentImageIndex = 0;
 95 |         }
 96 |     }
 97 |     
 98 |     // 创建全屏遮罩
 99 |     const overlay = document.createElement('div');
100 |     overlay.style.position = 'fixed';
101 |     overlay.style.top = '0';
102 |     overlay.style.left = '0';
103 |     overlay.style.width = '100%';
104 |     overlay.style.height = '100%';
105 |     overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.9)';
106 |     overlay.style.zIndex = '9999';
107 |     overlay.style.display = 'flex';
108 |     overlay.style.justifyContent = 'center';
109 |     overlay.style.alignItems = 'center';
110 |     overlay.style.cursor = 'pointer';
111 |     
112 |     // 创建大图元素
113 |     const fullscreenImg = document.createElement('img');
114 |     fullscreenImg.src = imageUrl;
115 |     fullscreenImg.style.maxWidth = '90%';
116 |     fullscreenImg.style.maxHeight = '90%';
117 |     fullscreenImg.style.objectFit = 'contain';
118 |     fullscreenImg.style.cursor = 'default';
119 |     
120 |     // 点击空白处关闭全屏预览
121 |     overlay.addEventListener('click', closeFullscreen);
122 |     
123 |     // 点击图片本身不关闭
124 |     fullscreenImg.addEventListener('click', function(e) {
125 |         e.stopPropagation();
126 |     });
127 |     
128 |     // 添加键盘事件监听
129 |     function handleKeyDown(e) {
130 |         // ESC键退出全屏
131 |         if (e.key === 'Escape') {
132 |             closeFullscreen();
133 |         }
134 |         // 左右方向键切换图片
135 |         else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
136 |             if (window.generatedImages && window.generatedImages.length > 0) {
137 |                 if (e.key === 'ArrowLeft') {
138 |                     currentImageIndex = (currentImageIndex - 1 + window.generatedImages.length) % window.generatedImages.length;
139 |                 } else {
140 |                     currentImageIndex = (currentImageIndex + 1) % window.generatedImages.length;
141 |                 }
142 |                 fullscreenImg.src = window.generatedImages[currentImageIndex];
143 |                 e.preventDefault();
144 |             }
145 |         }
146 |     }
147 |     
148 |     // 关闭全屏预览函数
149 |     function closeFullscreen() {
150 |         document.body.removeChild(overlay);
151 |         document.removeEventListener('keydown', handleKeyDown);
152 |         // 重置全局状态
153 |         window.isFullscreenImageOpen = false;
154 |     }
155 |     
156 |     // 添加键盘事件监听
157 |     document.addEventListener('keydown', handleKeyDown);
158 |     
159 |     overlay.appendChild(fullscreenImg);
160 |     document.body.appendChild(overlay);
161 | }
162 | 
163 | // 显示生成的图片 - 支持键盘左右键切换
164 | function displayGeneratedImages(images) {
165 |     const mainPreviewArea = document.getElementById('main_preview_area');
166 |     const thumbnailsContainer = document.getElementById('thumbnails_container');
167 |     
168 |     if (!mainPreviewArea || !thumbnailsContainer) return;
169 | 
170 |     // 清空容器
171 |     mainPreviewArea.innerHTML = '';
172 |     thumbnailsContainer.innerHTML = '';
173 | 
174 |     // 存储所有图片URL
175 |     window.generatedImages = images;
176 | 
177 |     // 如果有图片，默认显示第一张
178 |     if (images.length > 0) {
179 |         showSelectedImage(images[0]);
180 |     } else {
181 |         mainPreviewArea.innerHTML = `
182 |             <div class="d-flex justify-content-center align-items-center text-muted">
183 |                 没有生成图片
184 |             </div>
185 |         `;
186 |     }
187 | 
188 |     // 创建底部缩略图
189 |     images.forEach((imageUrl, index) => {
190 |         const thumbnailWrapper = document.createElement('div');
191 |         thumbnailWrapper.className = index === 0 ? 'selected' : '';
192 |         thumbnailWrapper.style.cursor = 'pointer';
193 |         thumbnailWrapper.style.border = index === 0 ? '2px solid #007bff' : '2px solid transparent';
194 |         thumbnailWrapper.style.borderRadius = '4px';
195 |         thumbnailWrapper.style.padding = '2px';
196 |         
197 |         const thumbnail = document.createElement('img');
198 |         thumbnail.src = imageUrl;
199 |         thumbnail.style.width = '42px';
200 |         thumbnail.style.height = '42px';
201 |         thumbnail.style.objectFit = 'cover';
202 |         thumbnail.style.borderRadius = '2px';
203 |         
204 |         // 点击缩略图选择图片
205 |         thumbnailWrapper.addEventListener('click', function() {
206 |             // 移除其他选中状态
207 |             const allThumbnails = thumbnailsContainer.querySelectorAll('div');
208 |             allThumbnails.forEach(thumb => {
209 |                 thumb.style.border = '2px solid transparent';
210 |             });
211 |             // 添加选中状态
212 |             this.style.border = '2px solid #007bff';
213 |             // 显示选中的图片
214 |             showSelectedImage(imageUrl);
215 |         });
216 |         
217 |         thumbnailWrapper.appendChild(thumbnail);
218 |         thumbnailsContainer.appendChild(thumbnailWrapper);
219 |     });
220 |     
221 |     // 添加键盘事件监听，支持左右键切换缩略图
222 |     if (images.length > 0) {
223 |         // 确保缩略图容器获得焦点
224 |         thumbnailsContainer.setAttribute('tabindex', '0');
225 |         
226 |         function handleThumbnailKeyDown(e) {
227 |             const thumbnails = thumbnailsContainer.querySelectorAll('div');
228 |             if (!thumbnails.length) return;
229 |             
230 |             // 找到当前选中的缩略图
231 |             let currentIndex = -1;
232 |             for (let i = 0; i < thumbnails.length; i++) {
233 |                 if (thumbnails[i].style.border === '2px solid #007bff') {
234 |                     currentIndex = i;
235 |                     break;
236 |                 }
237 |             }
238 |             
239 |             // 默认选择第一张
240 |             if (currentIndex === -1) currentIndex = 0;
241 |             
242 |             // 左右方向键切换
243 |             if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
244 |                 e.preventDefault();
245 |                 
246 |                 // 移除当前选中状态
247 |                 thumbnails[currentIndex].style.border = '2px solid transparent';
248 |                 
249 |                 // 计算新索引
250 |                 if (e.key === 'ArrowLeft') {
251 |                     currentIndex = (currentIndex - 1 + thumbnails.length) % thumbnails.length;
252 |                 } else {
253 |                     currentIndex = (currentIndex + 1) % thumbnails.length;
254 |                 }
255 |                 
256 |                 // 设置新选中状态
257 |                 thumbnails[currentIndex].style.border = '2px solid #007bff';
258 |                 
259 |                 // 显示选中的图片
260 |                 showSelectedImage(images[currentIndex]);
261 |                 
262 |                 // 滚动到选中的缩略图
263 |                 thumbnails[currentIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
264 |             }
265 |         }
266 |         
267 |         // 添加键盘事件监听
268 |         thumbnailsContainer.addEventListener('keydown', handleThumbnailKeyDown);
269 |     }
270 | }
271 | 
272 | // 显示选中的图片（中等大小）
273 | function showSelectedImage(imageUrl) {
274 |     const mainPreviewArea = document.getElementById('main_preview_area');
275 |     if (!mainPreviewArea) return;
276 |     
277 |     mainPreviewArea.innerHTML = '';
278 |     
279 |     const imgWrapper = document.createElement('div');
280 |     imgWrapper.style.cursor = 'pointer';
281 |     imgWrapper.style.display = 'flex';
282 |     imgWrapper.style.justifyContent = 'center';
283 |     imgWrapper.style.alignItems = 'center';
284 |     imgWrapper.style.width = '223.07px';
285 |     imgWrapper.style.height = '400px';
286 |     
287 |     const img = document.createElement('img');
288 |     img.src = imageUrl;
289 |     img.style.maxWidth = '100%';
290 |     img.style.maxHeight = '100%';
291 |     img.style.objectFit = 'contain';
292 |     
293 |     // 点击中等大小图片查看原图
294 |     imgWrapper.addEventListener('click', function() {
295 |         showImageFullscreen(imageUrl);
296 |     });
297 |     
298 |     imgWrapper.appendChild(img);
299 |     mainPreviewArea.appendChild(imgWrapper);
300 | }


--------------------------------------------------------------------------------
/extension/scripts/api.js:
--------------------------------------------------------------------------------
  1 | // API 管理类
  2 | class APIManager {
  3 |     constructor() {
  4 |         this.baseUrl = CONFIG.API.BASE_URL;
  5 |         this.timeout = CONFIG.API.TIMEOUT;
  6 |         this.pollInterval = CONFIG.API.POLL_INTERVAL;
  7 |         this.currentTaskId = null;
  8 |     }
  9 |     
 10 |     /**
 11 |      * 发送HTTP请求
 12 |      * @param {string} url - 请求URL
 13 |      * @param {Object} options - 请求选项
 14 |      * @returns {Promise<Object>} - 响应数据
 15 |      */
 16 |     async request(url, options = {}) {
 17 |         const controller = new AbortController();
 18 |         const timeoutId = setTimeout(() => controller.abort(), this.timeout);
 19 |         
 20 |         try {
 21 |             const response = await fetch(url, {
 22 |                 ...options,
 23 |                 signal: controller.signal,
 24 |                 headers: {
 25 |                     'Content-Type': 'application/json',
 26 |                     ...options.headers
 27 |                 }
 28 |             });
 29 |             
 30 |             clearTimeout(timeoutId);
 31 |             
 32 |             if (!response.ok) {
 33 |                 throw new Error(`HTTP ${response.status}: ${response.statusText}`);
 34 |             }
 35 |             
 36 |             const data = await response.json();
 37 |             return data;
 38 |             
 39 |         } catch (error) {
 40 |             clearTimeout(timeoutId);
 41 |             
 42 |             if (error.name === 'AbortError') {
 43 |                 throw new Error(CONFIG.ERRORS.TIMEOUT_ERROR);
 44 |             }
 45 |             
 46 |             throw error;
 47 |         }
 48 |     }
 49 |     
 50 |     /**
 51 |      * 上传文件
 52 |      * @param {File} file - 要上传的文件
 53 |      * @param {Function} onProgress - 进度回调函数
 54 |      * @returns {Promise<Object>} - 上传结果
 55 |      */
 56 |     async uploadFile(file, onProgress) {
 57 |         return new Promise((resolve, reject) => {
 58 |             const formData = new FormData();
 59 |             formData.append('file', file);
 60 |             
 61 |             const xhr = new XMLHttpRequest();
 62 |             
 63 |             // 监听上传进度
 64 |             xhr.upload.addEventListener('progress', (e) => {
 65 |                 if (e.lengthComputable && onProgress) {
 66 |                     const percent = Math.round((e.loaded / e.total) * 100);
 67 |                     onProgress(percent);
 68 |                 }
 69 |             });
 70 |             
 71 |             // 监听响应
 72 |             xhr.addEventListener('load', () => {
 73 |                 if (xhr.status === 200) {
 74 |                     try {
 75 |                         const response = JSON.parse(xhr.responseText);
 76 |                         resolve(response);
 77 |                     } catch (error) {
 78 |                         reject(new Error(CONFIG.ERRORS.INVALID_RESPONSE));
 79 |                     }
 80 |                 } else {
 81 |                     reject(new Error(`HTTP ${xhr.status}: ${xhr.statusText}`));
 82 |                 }
 83 |             });
 84 |             
 85 |             // 监听错误
 86 |             xhr.addEventListener('error', () => {
 87 |                 reject(new Error(CONFIG.ERRORS.NETWORK_ERROR));
 88 |             });
 89 |             
 90 |             // 监听超时
 91 |             xhr.addEventListener('timeout', () => {
 92 |                 reject(new Error(CONFIG.ERRORS.TIMEOUT_ERROR));
 93 |             });
 94 |             
 95 |             // 设置超时时间
 96 |             xhr.timeout = this.timeout;
 97 |             
 98 |             // 发送请求
 99 |             xhr.open('POST', `${this.baseUrl}${CONFIG.API.ENDPOINTS.UPLOAD}`);
100 |             xhr.send(formData);
101 |         });
102 |     }
103 |     
104 |     /**
105 |      * 分析图片
106 |      * @param {string} filename - 文件名
107 |      * @param {Object} settings - 设置参数
108 |      * @returns {Promise<Object>} - 分析结果
109 |      */
110 |     async analyzeImage(filename, settings) {
111 |         const url = `${this.baseUrl}${CONFIG.API.ENDPOINTS.ANALYZE}`;
112 |         
113 |         const requestData = {
114 |             filename: filename,
115 |             openai_api_key: settings.openaiKey
116 |         };
117 |         
118 |         return await this.request(url, {
119 |             method: 'POST',
120 |             body: JSON.stringify(requestData)
121 |         });
122 |     }
123 |     
124 |     /**
125 |      * 生成图片
126 |      * @param {string} prompt - 提示词
127 |      * @param {Object} settings - 设置参数
128 |      * @returns {Promise<Object>} - 生成结果
129 |      */
130 |     async generateImage(prompt, settings) {
131 |         const url = `${this.baseUrl}${CONFIG.API.ENDPOINTS.GENERATE}`;
132 |         
133 |         const requestData = {
134 |             prompt: prompt,
135 |             model_scope_cookie: settings.modelScopeCookie,
136 |             width: settings.imageWidth,
137 |             height: settings.imageHeight,
138 |             lora_args: CONFIG.DEFAULTS.LORA_ARGS
139 |         };
140 |         
141 |         return await this.request(url, {
142 |             method: 'POST',
143 |             body: JSON.stringify(requestData)
144 |         });
145 |     }
146 |     
147 |     /**
148 |      * 获取队列状态
149 |      * @param {string} taskId - 任务ID
150 |      * @returns {Promise<Object>} - 队列状态
151 |      */
152 |     async getQueueStatus(taskId) {
153 |         const url = `${this.baseUrl}${CONFIG.API.ENDPOINTS.QUEUE_STATUS}/${taskId}`;
154 |         return await this.request(url);
155 |     }
156 |     
157 |     /**
158 |      * 获取结果
159 |      * @param {string} taskId - 任务ID
160 |      * @returns {Promise<Object>} - 结果数据
161 |      */
162 |     async getResult(taskId) {
163 |         const url = `${this.baseUrl}${CONFIG.API.ENDPOINTS.RESULT}/${taskId}`;
164 |         return await this.request(url);
165 |     }
166 |     
167 |     /**
168 |      * 轮询任务状态
169 |      * @param {string} taskId - 任务ID
170 |      * @param {Function} onProgress - 进度回调函数
171 |      * @param {Function} onComplete - 完成回调函数
172 |      * @param {Function} onError - 错误回调函数
173 |      */
174 |     async pollTaskStatus(taskId, onProgress, onComplete, onError) {
175 |         this.currentTaskId = taskId;
176 |         
177 |         const poll = async () => {
178 |             try {
179 |                 // 检查是否已取消
180 |                 if (this.currentTaskId !== taskId) {
181 |                     return;
182 |                 }
183 |                 
184 |                 const status = await this.getQueueStatus(taskId);
185 |                 
186 |                 if (onProgress) {
187 |                     onProgress(status);
188 |                 }
189 |                 
190 |                 switch (status.status) {
191 |                     case CONFIG.STATUS.COMPLETED:
192 |                         // 获取结果
193 |                         const result = await this.getResult(taskId);
194 |                         if (onComplete) {
195 |                             onComplete(result);
196 |                         }
197 |                         break;
198 |                         
199 |                     case CONFIG.STATUS.FAILED:
200 |                         if (onError) {
201 |                             onError(new Error(status.error || '任务执行失败'));
202 |                         }
203 |                         break;
204 |                         
205 |                     case CONFIG.STATUS.CANCELLED:
206 |                         if (onError) {
207 |                             onError(new Error('任务已取消'));
208 |                         }
209 |                         break;
210 |                         
211 |                     case CONFIG.STATUS.PENDING:
212 |                     case CONFIG.STATUS.PROCESSING:
213 |                         // 继续轮询
214 |                         setTimeout(poll, this.pollInterval);
215 |                         break;
216 |                         
217 |                     default:
218 |                         if (onError) {
219 |                             onError(new Error('未知任务状态: ' + status.status));
220 |                         }
221 |                         break;
222 |                 }
223 |                 
224 |             } catch (error) {
225 |                 if (onError) {
226 |                     onError(error);
227 |                 }
228 |             }
229 |         };
230 |         
231 |         // 开始轮询
232 |         poll();
233 |     }
234 |     
235 |     /**
236 |      * 取消当前任务
237 |      */
238 |     cancelCurrentTask() {
239 |         this.currentTaskId = null;
240 |     }
241 |     
242 |     /**
243 |      * 完整的图片处理流程
244 |      * @param {File} file - 图片文件
245 |      * @param {Object} settings - 设置参数
246 |      * @param {Object} callbacks - 回调函数集合
247 |      * @returns {Promise<Object>} - 处理结果
248 |      */
249 |     async processImage(file, settings, callbacks = {}) {
250 |         const {
251 |             onUploadProgress,
252 |             onAnalyzeStart,
253 |             onAnalyzeComplete,
254 |             onGenerateStart,
255 |             onGenerateProgress,
256 |             onGenerateComplete,
257 |             onError
258 |         } = callbacks;
259 |         
260 |         try {
261 |             // 1. 上传文件
262 |             const uploadResult = await this.uploadFile(file, onUploadProgress);
263 |             
264 |             if (!uploadResult.success) {
265 |                 throw new Error(uploadResult.error || CONFIG.ERRORS.UPLOAD_FAILED);
266 |             }
267 |             
268 |             // 2. 分析图片
269 |             if (onAnalyzeStart) {
270 |                 onAnalyzeStart();
271 |             }
272 |             
273 |             const analyzeResult = await this.analyzeImage(uploadResult.filename, settings);
274 |             
275 |             if (!analyzeResult.success) {
276 |                 throw new Error(analyzeResult.error || CONFIG.ERRORS.ANALYZE_FAILED);
277 |             }
278 |             
279 |             if (onAnalyzeComplete) {
280 |                 onAnalyzeComplete(analyzeResult);
281 |             }
282 |             
283 |             // 3. 生成图片
284 |             if (onGenerateStart) {
285 |                 onGenerateStart();
286 |             }
287 |             
288 |             const generateResult = await this.generateImage(analyzeResult.prompt, settings);
289 |             
290 |             if (!generateResult.success) {
291 |                 throw new Error(generateResult.error || CONFIG.ERRORS.GENERATE_FAILED);
292 |             }
293 |             
294 |             // 4. 轮询生成状态
295 |             return new Promise((resolve, reject) => {
296 |                 this.pollTaskStatus(
297 |                     generateResult.task_id,
298 |                     onGenerateProgress,
299 |                     (result) => {
300 |                         if (onGenerateComplete) {
301 |                             onGenerateComplete(result);
302 |                         }
303 |                         resolve(result);
304 |                     },
305 |                     (error) => {
306 |                         if (onError) {
307 |                             onError(error);
308 |                         }
309 |                         reject(error);
310 |                     }
311 |                 );
312 |             });
313 |             
314 |         } catch (error) {
315 |             if (onError) {
316 |                 onError(error);
317 |             }
318 |             throw error;
319 |         }
320 |     }
321 |     
322 |     /**
323 |      * 检查服务器连接
324 |      * @returns {Promise<boolean>} - 连接状态
325 |      */
326 |     async checkConnection() {
327 |         try {
328 |             const response = await fetch(`${this.baseUrl}/health`, {
329 |                 method: 'GET',
330 |                 timeout: 5000
331 |             });
332 |             
333 |             return response.ok;
334 |             
335 |         } catch (error) {
336 |             return false;
337 |         }
338 |     }
339 | }
340 | 
341 | // 导出API管理类
342 | if (typeof module !== 'undefined' && module.exports) {
343 |     module.exports = APIManager;
344 | } else if (typeof window !== 'undefined') {
345 |     window.APIManager = APIManager;
346 | }


--------------------------------------------------------------------------------
/extension/scripts/ui.js:
--------------------------------------------------------------------------------
  1 | // UI 管理类
  2 | class UIManager {
  3 |     constructor() {
  4 |         this.elements = {};
  5 |         this.currentImageData = null;
  6 |         this.generatedImages = [];
  7 |         this.selectedThumbnail = null;
  8 |         
  9 |         this.initializeElements();
 10 |         this.bindEvents();
 11 |         this.loadSettings();
 12 |     }
 13 |     
 14 |     /**
 15 |      * 初始化DOM元素引用
 16 |      */
 17 |     initializeElements() {
 18 |         this.elements = {
 19 |             // 文件上传相关
 20 |             fileDropArea: document.getElementById('fileDropArea'),
 21 |             fileInput: document.getElementById('fileInput'),
 22 |             dropPlaceholder: document.getElementById('dropPlaceholder'),
 23 |             imagePreview: document.getElementById('imagePreview'),
 24 |             previewImg: document.getElementById('previewImg'),
 25 |             
 26 |             // 进度相关
 27 |             uploadProgress: document.getElementById('uploadProgress'),
 28 |             progressFill: document.getElementById('progressFill'),
 29 |             progressText: document.getElementById('progressText'),
 30 |             
 31 |             // 按钮
 32 |             analyzeBtn: document.getElementById('analyzeBtn'),
 33 |             settingsBtn: document.getElementById('settingsBtn'),
 34 |             
 35 |             // 结果显示
 36 |             queueInfo: document.getElementById('queueInfo'),
 37 |             queueDetail: document.getElementById('queueDetail'),
 38 |             queueProgress: document.getElementById('queueProgress'),
 39 |             mainPreview: document.getElementById('mainPreview'),
 40 |             thumbnailsContainer: document.getElementById('thumbnailsContainer'),
 41 |             
 42 | 
 43 |             
 44 |             // 设置面板
 45 |             settingsPanel: document.getElementById('settingsPanel'),
 46 |             closeSettings: document.getElementById('closeSettings'),
 47 |             openaiKey: document.getElementById('openaiKey'),
 48 |             modelScopeCookie: document.getElementById('modelScopeCookie'),
 49 |             imageWidth: document.getElementById('imageWidth'),
 50 |             imageHeight: document.getElementById('imageHeight'),
 51 |             saveSettings: document.getElementById('saveSettings'),
 52 |             resetSettings: document.getElementById('resetSettings'),
 53 |             
 54 |             // Toast容器
 55 |             toastContainer: document.getElementById('toastContainer')
 56 |         };
 57 |     }
 58 |     
 59 |     /**
 60 |      * 绑定事件监听器
 61 |      */
 62 |     bindEvents() {
 63 |         // 文件拖放事件
 64 |         this.elements.fileDropArea.addEventListener('dragover', this.handleDragOver.bind(this));
 65 |         this.elements.fileDropArea.addEventListener('dragleave', this.handleDragLeave.bind(this));
 66 |         this.elements.fileDropArea.addEventListener('drop', this.handleDrop.bind(this));
 67 |         this.elements.fileDropArea.addEventListener('click', () => this.elements.fileInput.click());
 68 |         
 69 |         // 文件选择事件
 70 |         this.elements.fileInput.addEventListener('change', this.handleFileSelect.bind(this));
 71 |         
 72 |         // 按钮事件
 73 |         this.elements.analyzeBtn.addEventListener('click', this.handleAnalyze.bind(this));
 74 |         this.elements.settingsBtn.addEventListener('click', this.showSettings.bind(this));
 75 |         this.elements.closeSettings.addEventListener('click', this.hideSettings.bind(this));
 76 |         this.elements.saveSettings.addEventListener('click', this.saveSettings.bind(this));
 77 |         this.elements.resetSettings.addEventListener('click', this.resetSettings.bind(this));
 78 |         
 79 |         // 主预览区域点击事件
 80 |         this.elements.mainPreview.addEventListener('click', this.handleMainPreviewClick.bind(this));
 81 |     }
 82 |     
 83 |     /**
 84 |      * 处理拖拽悬停
 85 |      */
 86 |     handleDragOver(e) {
 87 |         e.preventDefault();
 88 |         this.elements.fileDropArea.classList.add('active');
 89 |     }
 90 |     
 91 |     /**
 92 |      * 处理拖拽离开
 93 |      */
 94 |     handleDragLeave(e) {
 95 |         e.preventDefault();
 96 |         this.elements.fileDropArea.classList.remove('active');
 97 |     }
 98 |     
 99 |     /**
100 |      * 处理文件拖放
101 |      */
102 |     handleDrop(e) {
103 |         e.preventDefault();
104 |         this.elements.fileDropArea.classList.remove('active');
105 |         
106 |         const files = e.dataTransfer.files;
107 |         if (files.length > 0) {
108 |             this.handleFile(files[0]);
109 |         }
110 |     }
111 |     
112 |     /**
113 |      * 处理文件选择
114 |      */
115 |     handleFileSelect(e) {
116 |         const files = e.target.files;
117 |         if (files.length > 0) {
118 |             this.handleFile(files[0]);
119 |         }
120 |     }
121 |     
122 |     /**
123 |      * 处理文件
124 |      */
125 |     async handleFile(file) {
126 |         // 验证文件
127 |         const validation = Utils.validateFile(file);
128 |         if (!validation.valid) {
129 |             this.showToast(validation.error, 'error');
130 |             return;
131 |         }
132 |         
133 |         try {
134 |             // 显示图片预览
135 |             const previewUrl = await Utils.createImagePreview(file);
136 |             this.showImagePreview(previewUrl);
137 |             
138 |             // 保存文件数据
139 |             this.currentImageData = file;
140 |             
141 |             // 启用分析按钮
142 |             this.elements.analyzeBtn.disabled = false;
143 |             
144 |             // 记录日志
145 | 
146 |             
147 |         } catch (error) {
148 |             this.showToast('图片预览失败', 'error');
149 | 
150 |         }
151 |     }
152 |     
153 |     /**
154 |      * 显示图片预览
155 |      */
156 |     showImagePreview(url) {
157 |         this.elements.previewImg.src = url;
158 |         this.elements.dropPlaceholder.style.display = 'none';
159 |         this.elements.imagePreview.style.display = 'flex';
160 |     }
161 |     
162 |     /**
163 |      * 隐藏图片预览
164 |      */
165 |     hideImagePreview() {
166 |         this.elements.previewImg.src = '';
167 |         this.elements.dropPlaceholder.style.display = 'block';
168 |         this.elements.imagePreview.style.display = 'none';
169 |     }
170 |     
171 |     /**
172 |      * 处理分析按钮点击
173 |      */
174 |     async handleAnalyze() {
175 |         if (!this.currentImageData) {
176 |             this.showToast('请先选择图片', 'warning');
177 |             return;
178 |         }
179 |         
180 |         // 检查设置
181 |         const settings = await this.getSettings();
182 |         if (!settings.openaiKey) {
183 |             this.showToast(CONFIG.ERRORS.MISSING_API_KEY, 'error');
184 |             this.showSettings();
185 |             return;
186 |         }
187 |         
188 |         if (!settings.modelScopeCookie) {
189 |             this.showToast(CONFIG.ERRORS.MISSING_COOKIE, 'error');
190 |             this.showSettings();
191 |             return;
192 |         }
193 |         
194 |         try {
195 |             // 禁用按钮
196 |             this.elements.analyzeBtn.disabled = true;
197 |             this.elements.analyzeBtn.textContent = '处理中...';
198 |             
199 |             // 开始处理
200 |             await this.processImage();
201 |             
202 |         } catch (error) {
203 |             this.showToast('处理失败: ' + error.message, 'error');
204 | 
205 |         } finally {
206 |             // 恢复按钮
207 |             this.elements.analyzeBtn.disabled = false;
208 |             this.elements.analyzeBtn.textContent = '反推并生成';
209 |         }
210 |     }
211 |     
212 |     /**
213 |      * 处理图片
214 |      */
215 |     async processImage() {
216 |         // 这里应该调用API类的方法
217 |         // 由于API类还没有实现，先模拟处理过程
218 |         
219 | 
220 |         this.showUploadProgress(0);
221 |         
222 |         // 模拟上传进度
223 |         for (let i = 0; i <= 100; i += 10) {
224 |             await Utils.sleep(100);
225 |             this.showUploadProgress(i);
226 |         }
227 |         
228 |         this.hideUploadProgress();
229 | 
230 |         
231 |         // 显示队列信息
232 |         this.showQueueInfo('正在分析图片内容...', 0);
233 |         
234 |         // 模拟分析过程
235 |         for (let i = 0; i <= 100; i += 5) {
236 |             await Utils.sleep(200);
237 |             this.updateQueueProgress(i);
238 |             
239 |             if (i === 50) {
240 |                 this.updateQueueInfo('正在生成新图片...', i);
241 |             }
242 |         }
243 |         
244 |         // 模拟生成结果
245 |         this.hideQueueInfo();
246 | 
247 |         
248 |         // 显示生成的图片（这里使用示例图片）
249 |         const mockImages = [
250 |             'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZGRkIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtc2l6ZT0iMTgiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj7nlJ/miJDlm77niYcxPC90ZXh0Pjwvc3ZnPg==',
251 |             'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjYWFhIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtc2l6ZT0iMTgiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj7nlJ/miJDlm77niYcyPC90ZXh0Pjwvc3ZnPg==',
252 |             'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjNzc3Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtc2l6ZT0iMTgiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj7nlJ/miJDlm77niYczPC90ZXh0Pjwvc3ZnPg=='
253 |         ];
254 |         
255 |         this.showGeneratedImages(mockImages);
256 |     }
257 |     
258 |     /**
259 |      * 显示上传进度
260 |      */
261 |     showUploadProgress(percent) {
262 |         this.elements.uploadProgress.style.display = 'block';
263 |         this.elements.progressFill.style.width = percent + '%';
264 |         this.elements.progressText.textContent = `上传中... ${percent}%`;
265 |     }
266 |     
267 |     /**
268 |      * 隐藏上传进度
269 |      */
270 |     hideUploadProgress() {
271 |         this.elements.uploadProgress.style.display = 'none';
272 |     }
273 |     
274 |     /**
275 |      * 显示队列信息
276 |      */
277 |     showQueueInfo(message, progress) {
278 |         this.elements.queueInfo.style.display = 'block';
279 |         this.elements.queueDetail.textContent = message;
280 |         this.elements.queueProgress.style.width = progress + '%';
281 |     }
282 |     
283 |     /**
284 |      * 更新队列信息
285 |      */
286 |     updateQueueInfo(message, progress) {
287 |         this.elements.queueDetail.textContent = message;
288 |         this.elements.queueProgress.style.width = progress + '%';
289 |     }
290 |     
291 |     /**
292 |      * 更新队列进度
293 |      */
294 |     updateQueueProgress(progress) {
295 |         this.elements.queueProgress.style.width = progress + '%';
296 |     }
297 |     
298 |     /**
299 |      * 隐藏队列信息
300 |      */
301 |     hideQueueInfo() {
302 |         this.elements.queueInfo.style.display = 'none';
303 |     }
304 |     
305 |     /**
306 |      * 显示生成的图片
307 |      */
308 |     showGeneratedImages(images) {
309 |         this.generatedImages = images;
310 |         
311 |         // 清空缩略图容器
312 |         this.elements.thumbnailsContainer.innerHTML = '';
313 |         
314 |         // 创建缩略图
315 |         images.forEach((imageUrl, index) => {
316 |             const wrapper = document.createElement('div');
317 |             wrapper.className = 'thumbnail-wrapper';
318 |             wrapper.dataset.index = index;
319 |             
320 |             const img = document.createElement('img');
321 |             img.src = imageUrl;
322 |             img.alt = `生成图片 ${index + 1}`;
323 |             
324 |             wrapper.appendChild(img);
325 |             this.elements.thumbnailsContainer.appendChild(wrapper);
326 |             
327 |             // 绑定点击事件
328 |             wrapper.addEventListener('click', () => this.selectThumbnail(index));
329 |         });
330 |         
331 |         // 默认选择第一张图片
332 |         if (images.length > 0) {
333 |             this.selectThumbnail(0);
334 |         }
335 |     }
336 |     
337 |     /**
338 |      * 选择缩略图
339 |      */
340 |     selectThumbnail(index) {
341 |         // 移除之前的选中状态
342 |         if (this.selectedThumbnail !== null) {
343 |             const prevWrapper = this.elements.thumbnailsContainer.children[this.selectedThumbnail];
344 |             if (prevWrapper) {
345 |                 prevWrapper.classList.remove('selected');
346 |             }
347 |         }
348 |         
349 |         // 设置新的选中状态
350 |         this.selectedThumbnail = index;
351 |         const wrapper = this.elements.thumbnailsContainer.children[index];
352 |         if (wrapper) {
353 |             wrapper.classList.add('selected');
354 |         }
355 |         
356 |         // 在主预览区域显示选中的图片
357 |         this.showMainPreview(this.generatedImages[index]);
358 |     }
359 |     
360 |     /**
361 |      * 在主预览区域显示图片
362 |      */
363 |     showMainPreview(imageUrl) {
364 |         this.elements.mainPreview.innerHTML = `<img src="${imageUrl}" alt="预览图片">`;
365 |     }
366 |     
367 |     /**
368 |      * 处理主预览区域点击
369 |      */
370 |     handleMainPreviewClick() {
371 |         if (this.selectedThumbnail !== null && this.generatedImages[this.selectedThumbnail]) {
372 |             // 在新标签页中打开图片
373 |             window.open(this.generatedImages[this.selectedThumbnail], '_blank');
374 |         }
375 |     }
376 |     
377 |     /**
378 |      * 显示设置面板
379 |      */
380 |     showSettings() {
381 |         this.elements.settingsPanel.style.display = 'block';
382 |     }
383 |     
384 |     /**
385 |      * 隐藏设置面板
386 |      */
387 |     hideSettings() {
388 |         this.elements.settingsPanel.style.display = 'none';
389 |     }
390 |     
391 |     /**
392 |      * 保存设置
393 |      */
394 |     async saveSettings() {
395 |         const settings = {
396 |             openaiKey: this.elements.openaiKey.value.trim(),
397 |             modelScopeCookie: this.elements.modelScopeCookie.value.trim(),
398 |             imageWidth: parseInt(this.elements.imageWidth.value) || CONFIG.DEFAULTS.IMAGE_WIDTH,
399 |             imageHeight: parseInt(this.elements.imageHeight.value) || CONFIG.DEFAULTS.IMAGE_HEIGHT
400 |         };
401 |         
402 |         try {
403 |             // 保存到Chrome存储
404 |             await chrome.storage.local.set({
405 |                 [CONFIG.STORAGE_KEYS.OPENAI_API_KEY]: settings.openaiKey,
406 |                 [CONFIG.STORAGE_KEYS.MODEL_SCOPE_COOKIE]: settings.modelScopeCookie,
407 |                 [CONFIG.STORAGE_KEYS.IMAGE_WIDTH]: settings.imageWidth,
408 |                 [CONFIG.STORAGE_KEYS.IMAGE_HEIGHT]: settings.imageHeight,
409 |                 [CONFIG.STORAGE_KEYS.SETTINGS]: settings
410 |             });
411 |             
412 |             this.showToast(CONFIG.SUCCESS.SETTINGS_SAVED, 'success');
413 | 
414 |             this.hideSettings();
415 |             
416 |         } catch (error) {
417 |             this.showToast('设置保存失败', 'error');
418 | 
419 |         }
420 |     }
421 |     
422 |     /**
423 |      * 重置设置
424 |      */
425 |     async resetSettings() {
426 |         this.elements.openaiKey.value = '';
427 |         this.elements.modelScopeCookie.value = '';
428 |         this.elements.imageWidth.value = CONFIG.DEFAULTS.IMAGE_WIDTH;
429 |         this.elements.imageHeight.value = CONFIG.DEFAULTS.IMAGE_HEIGHT;
430 |         
431 |         try {
432 |             // 清除Chrome存储
433 |             await chrome.storage.local.remove([
434 |                 CONFIG.STORAGE_KEYS.OPENAI_API_KEY,
435 |                 CONFIG.STORAGE_KEYS.MODEL_SCOPE_COOKIE,
436 |                 CONFIG.STORAGE_KEYS.IMAGE_WIDTH,
437 |                 CONFIG.STORAGE_KEYS.IMAGE_HEIGHT,
438 |                 CONFIG.STORAGE_KEYS.SETTINGS
439 |             ]);
440 |             
441 |             this.showToast(CONFIG.SUCCESS.SETTINGS_RESET, 'success');
442 | 
443 |             
444 |         } catch (error) {
445 |             this.showToast('设置重置失败', 'error');
446 | 
447 |         }
448 |     }
449 |     
450 |     /**
451 |      * 加载设置
452 |      */
453 |     async loadSettings() {
454 |         try {
455 |             const result = await chrome.storage.local.get([
456 |                 CONFIG.STORAGE_KEYS.OPENAI_API_KEY,
457 |                 CONFIG.STORAGE_KEYS.MODEL_SCOPE_COOKIE,
458 |                 CONFIG.STORAGE_KEYS.IMAGE_WIDTH,
459 |                 CONFIG.STORAGE_KEYS.IMAGE_HEIGHT
460 |             ]);
461 |             
462 |             this.elements.openaiKey.value = result[CONFIG.STORAGE_KEYS.OPENAI_API_KEY] || '';
463 |             this.elements.modelScopeCookie.value = result[CONFIG.STORAGE_KEYS.MODEL_SCOPE_COOKIE] || '';
464 |             this.elements.imageWidth.value = result[CONFIG.STORAGE_KEYS.IMAGE_WIDTH] || CONFIG.DEFAULTS.IMAGE_WIDTH;
465 |             this.elements.imageHeight.value = result[CONFIG.STORAGE_KEYS.IMAGE_HEIGHT] || CONFIG.DEFAULTS.IMAGE_HEIGHT;
466 |             
467 |         } catch (error) {
468 | 
469 |         }
470 |     }
471 |     
472 |     /**
473 |      * 获取当前设置
474 |      */
475 |     async getSettings() {
476 |         try {
477 |             const result = await chrome.storage.local.get([
478 |                 CONFIG.STORAGE_KEYS.OPENAI_API_KEY,
479 |                 CONFIG.STORAGE_KEYS.MODEL_SCOPE_COOKIE,
480 |                 CONFIG.STORAGE_KEYS.IMAGE_WIDTH,
481 |                 CONFIG.STORAGE_KEYS.IMAGE_HEIGHT
482 |             ]);
483 |             
484 |             return {
485 |                 openaiKey: result[CONFIG.STORAGE_KEYS.OPENAI_API_KEY] || '',
486 |                 modelScopeCookie: result[CONFIG.STORAGE_KEYS.MODEL_SCOPE_COOKIE] || '',
487 |                 imageWidth: result[CONFIG.STORAGE_KEYS.IMAGE_WIDTH] || CONFIG.DEFAULTS.IMAGE_WIDTH,
488 |                 imageHeight: result[CONFIG.STORAGE_KEYS.IMAGE_HEIGHT] || CONFIG.DEFAULTS.IMAGE_HEIGHT
489 |             };
490 |             
491 |         } catch (error) {
492 | 
493 |             return {
494 |                 openaiKey: '',
495 |                 modelScopeCookie: '',
496 |                 imageWidth: CONFIG.DEFAULTS.IMAGE_WIDTH,
497 |                 imageHeight: CONFIG.DEFAULTS.IMAGE_HEIGHT
498 |             };
499 |         }
500 |     }
501 |     
502 |     /**
503 |      * 显示Toast通知
504 |      */
505 |     showToast(message, type = 'info') {
506 |         const toast = document.createElement('div');
507 |         toast.className = `toast ${type}`;
508 |         toast.textContent = message;
509 |         
510 |         this.elements.toastContainer.appendChild(toast);
511 |         
512 |         // 自动移除Toast
513 |         setTimeout(() => {
514 |             if (toast.parentNode) {
515 |                 toast.parentNode.removeChild(toast);
516 |             }
517 |         }, CONFIG.UI.TOAST_DURATION);
518 |     }
519 |     
520 | 
521 | }
522 | 
523 | // 导出UI管理类
524 | if (typeof module !== 'undefined' && module.exports) {
525 |     module.exports = UIManager;
526 | } else if (typeof window !== 'undefined') {
527 |     window.UIManager = UIManager;
528 | }


--------------------------------------------------------------------------------
/routes.py:
--------------------------------------------------------------------------------
  1 | import re
  2 | import uuid
  3 | import requests
  4 | from datetime import datetime
  5 | from flask import Blueprint, render_template, request, jsonify, session, current_app
  6 | from werkzeug.utils import secure_filename
  7 | import os
  8 | import logging
  9 | from image_analyzer import analyze_image
 10 | from config import ALLOWED_EXTENSIONS, MODEL_SCOPE_COOKIE, DEFAULT_WIDTH, DEFAULT_HEIGHT, LORA_ARGS
 11 | from utils import allowed_file, extract_csrf_token, generate_trace_id
 12 | 
 13 | main_bp = Blueprint('main', __name__)
 14 | 
 15 | @main_bp.route('/')
 16 | def index():
 17 |     return render_template('index.html')
 18 | 
 19 | @main_bp.route('/health', methods=['GET'])
 20 | def health_check():
 21 |     """健康检查端点，用于插件检测服务器状态"""
 22 |     return jsonify({
 23 |         'success': True,
 24 |         'message': 'Gua Step3反推+魔搭生图服务运行正常',
 25 |         'status': 'healthy',
 26 |         'timestamp': str(datetime.now())
 27 |     })
 28 | 
 29 | @main_bp.route('/upload', methods=['POST'])
 30 | def upload_file():
 31 |     if 'file' not in request.files:
 32 |         return jsonify({'success': False, 'error': 'No file part'})
 33 |     file = request.files['file']
 34 |     if file.filename == '':
 35 |         return jsonify({'success': False, 'error': 'No selected file'})
 36 |     if file and allowed_file(file.filename):
 37 |         filename = secure_filename(file.filename)
 38 |         file_path = os.path.join(current_app.config['UPLOAD_FOLDER'], filename)
 39 |         file.save(file_path)
 40 |         
 41 |         session['image_path'] = file_path
 42 |         session['image_filename'] = filename
 43 | 
 44 |         return jsonify({'success': True, 'filename': filename})
 45 |     return jsonify({'success': False, 'error': 'File type not allowed'})
 46 | 
 47 | @main_bp.route('/analyze', methods=['POST'])
 48 | def analyze():
 49 |     image_path = session.get('image_path')
 50 |     if not image_path or not os.path.exists(image_path):
 51 |         return jsonify({'success': False, 'message': '请先上传图片！'})
 52 |     
 53 |     try:
 54 |         success, result = analyze_image(image_path, api_key=current_app.config['OPENAI_API_KEY'])
 55 |         if success:
 56 |             # 分析完成后再删除临时文件
 57 |             if os.path.exists(temp_image_path):
 58 |                 os.remove(temp_image_path)
 59 |             return jsonify({'success': True, 'prompt': result})
 60 |         else:
 61 |             # 分析失败也要删除临时文件
 62 |             if os.path.exists(temp_image_path):
 63 |                 os.remove(temp_image_path)
 64 |             return jsonify({'success': False, 'error': result})
 65 |     except Exception as e:
 66 |         return jsonify({'success': False, 'error': str(e)})
 67 | 
 68 | @main_bp.route('/analyze_from_url', methods=['POST'])
 69 | def analyze_from_url():
 70 |     data = request.get_json()
 71 |     image_url = data.get('url')
 72 | 
 73 |     if not image_url:
 74 |         return jsonify({'success': False, 'message': '缺少图片URL！'})
 75 | 
 76 |     try:
 77 |         # 发送GET请求下载图片
 78 |         response = requests.get(image_url, stream=True)
 79 |         response.raise_for_status()  # 如果请求失败，则抛出异常
 80 | 
 81 |         # 创建一个临时文件来保存图片
 82 |         temp_dir = current_app.config['UPLOAD_FOLDER']
 83 |         if not os.path.exists(temp_dir):
 84 |             os.makedirs(temp_dir)
 85 |         
 86 |         # 从URL中提取文件名，如果无法提取则生成一个唯一的文件名
 87 |         filename = os.path.basename(image_url.split('?')[0])
 88 |         if not filename:
 89 |             filename = str(uuid.uuid4()) + '.jpg'
 90 |         else:
 91 |             filename = secure_filename(filename)
 92 | 
 93 |         temp_image_path = os.path.join(temp_dir, filename)
 94 | 
 95 |         with open(temp_image_path, 'wb') as f:
 96 |             for chunk in response.iter_content(chunk_size=8192):
 97 |                 f.write(chunk)
 98 | 
 99 |         # 图片下载成功后，调用analyze_image进行分析
100 |         success, result = analyze_image(temp_image_path, api_key=current_app.config['OPENAI_API_KEY'])
101 |         
102 |         # if success:
103 |         #     return jsonify({'success': True, 'prompt': result})
104 |         # else:
105 |         #     return jsonify({'success': False, 'error': result})
106 | 
107 |     except requests.exceptions.RequestException as e:
108 |         return jsonify({'success': False, 'error': f'下载图片失败: {e}'})
109 |     except Exception as e:
110 |         return jsonify({'success': False, 'error': f'图片分析出错: {e}'})
111 | 
112 | @main_bp.route('/api/generate_image', methods=['POST'])
113 | def generate_image_proxy():
114 |     """生成图片的后端代理API"""
115 |     try:
116 |         # 获取请求参数
117 |         data = request.get_json()
118 |         prompt = data.get('prompt', '')
119 |         cookie = MODEL_SCOPE_COOKIE  # 直接使用config中的cookie
120 |         width = DEFAULT_WIDTH  # 直接使用config中的默认宽度
121 |         height = DEFAULT_HEIGHT  # 直接使用config中的默认高度
122 |         check_status_only = data.get('check_status_only', False)
123 |         
124 |         if not prompt:
125 |             return jsonify({'success': False, 'error': '请输入提示词'})
126 |         
127 |         if not cookie:
128 |             return jsonify({'success': False, 'error': 'Cookie未配置，请在config.py中设置MODEL_SCOPE_COOKIE'})
129 |         
130 |         logging.info(f'开始生成图片，提示词: {prompt[:50]}{"..." if len(prompt) > 50 else ""}')
131 |         
132 |         # 打印详细的请求参数信息
133 |         # 构建请求参数
134 |         api_url = 'https://www.modelscope.cn/api/v1/muse/predict/task/submit'
135 |         
136 |         print("=" * 80)
137 |         print("🚀 SUBMIT任务 - 开始提交图片生成任务")
138 |         print("=" * 80)
139 |         print(f"📝 提示词: {prompt}")
140 |         print(f"📏 图片尺寸: {width}x{height}")
141 |         print(f"🍪 Cookie (前50字符): {cookie[:50]}...")
142 |         print(f"🔗 API URL: {api_url}")
143 |         # 如果是只查询状态，直接尝试查询当前用户最新的任务
144 |         if check_status_only:
145 |             # 简单模拟查询逻辑
146 | 
147 |             # 这里可以根据需要实现更复杂的逻辑，例如根据用户session或cookie查找最近的任务
148 |             return jsonify({
149 |                 'success': True,
150 |                 'status': 'PROCESSING',
151 |                 'progress': 0,
152 |                 'message': '请先发送完整的生成请求',
153 |                 'is_completed': False
154 |             })
155 | 
156 |         # 构建请求参数 - 尝试多种可能的任务类型参数名称
157 |         request_body = {
158 |             'taskType': 'TXT_2_IMG',  # 原始参数名
159 |             'type': 'TXT_2_IMG',      # 可能的替代参数名1
160 |             'task_type': 'TXT_2_IMG', # 可能的替代参数名2
161 |             'predictType': 'TXT_2_IMG', # 可能的替代参数名3
162 |             'modelArgs': {
163 |                 'checkpointModelVersionId': 275167,
164 |                 'checkpointShowInfo': "Qwen_Image_v1.safetensors",
165 |                 'loraArgs': LORA_ARGS,
166 |                 'predictType': "TXT_2_IMG"
167 |             },
168 |             'promptArgs': {
169 |                 'prompt': prompt,
170 |                 'negativePrompt': ""
171 |             },
172 |             'basicDiffusionArgs': {
173 |                 'sampler': "Euler",
174 |                 'guidanceScale': 3,
175 |                 'seed': -1,
176 |                 'numInferenceSteps': 60,
177 |                 'numImagesPerPrompt': 4,
178 |                 'width': int(width),
179 |                 'height': int(height)
180 |             },
181 |             'advanced': False,
182 |             'addWaterMark': False,
183 |             'adetailerArgsMap': {},
184 |             'controlNetFullArgs': [],
185 |             'hiresFixFrontArgs': None
186 |         }
187 |         
188 |         # 提取CSRF Token - 增强版本，支持更多格式
189 |         def extract_csrf_token_enhanced(cookie_str):
190 |             # 清理cookie字符串，确保格式正确
191 |             cookie_str = cookie_str.strip()
192 |             
193 |             # 尝试从csrf_token格式提取
194 |             match = re.search(r'csrf_token=([^;]+)', cookie_str)
195 |             if match:
196 |                 token = match.group(1)
197 |                 # 处理可能的URL编码或引号
198 |                 return token.strip('"')
199 |             
200 |             # 尝试从csrftoken格式提取
201 |             match = re.search(r'csrftoken=([^;]+)', cookie_str)
202 |             if match:
203 |                 token = match.group(1)
204 |                 return token.strip('"')
205 |             
206 |             # 尝试从csrf_session格式提取
207 |             match = re.search(r'csrf_session=([^;]+)', cookie_str)
208 |             if match:
209 |                 token = match.group(1)
210 |                 return token.strip('"')
211 |             
212 |             # 尝试从XSRF-TOKEN格式提取
213 |             match = re.search(r'XSRF-TOKEN=([^;]+)', cookie_str)
214 |             if match:
215 |                 token = match.group(1)
216 |                 return token.strip('"')
217 |             
218 |             # 如果没有找到CSRF Token，记录警告但继续执行
219 |             logging.warning('未从Cookie中提取到CSRF Token')
220 |             return ''
221 |         
222 |         # 生成Trace ID
223 |         def generate_trace_id_enhanced():
224 |             import uuid
225 |             return str(uuid.uuid4())
226 |         
227 |         # 发送请求到ModelScope API - 增强的请求头，更接近真实浏览器
228 |         headers = {
229 |             'Content-Type': 'application/json',
230 |             'Cookie': cookie,
231 |             'X-Csrftoken': extract_csrf_token_enhanced(cookie),
232 |             'X-Modelscope-Trace-Id': generate_trace_id_enhanced(),
233 |             'X-Modelscope-Accept-Language': 'zh_CN',
234 |             'Referer': 'https://www.modelscope.cn/aigc/imageGeneration?tab=advanced&presetId=5804',
235 |             'Origin': 'https://www.modelscope.cn',
236 |             'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36',
237 |             'Accept': 'application/json, text/plain, */*',
238 |             'Accept-Encoding': 'gzip, deflate, br, zstd',
239 |             'Accept-Language': 'zh-CN,zh;q=0.9',
240 |             'Bx-V': '2.5.31',
241 |             'Connection': 'keep-alive',
242 |             'Cache-Control': 'no-cache',
243 |             'Pragma': 'no-cache',
244 |             'Host': 'www.modelscope.cn',
245 |             'Sec-Ch-Ua': '"Chromium";v="140", "Not=A?Brand";v="24", "Google Chrome";v="140"',
246 |             'Sec-Ch-Ua-Mobile': '?0',
247 |             'Sec-Ch-Ua-Platform': '"Windows"',
248 |             'Sec-Fetch-Dest': 'empty',
249 |             'Sec-Fetch-Mode': 'cors',
250 |             'Sec-Fetch-Site': 'same-origin'
251 |         }
252 |         
253 |         # 详细记录请求信息以便调试
254 |         print("📦 请求体详细信息:")
255 |         print(f"   taskType: {request_body.get('taskType')}")
256 |         print(f"   modelArgs.checkpointModelVersionId: {request_body['modelArgs']['checkpointModelVersionId']}")
257 |         print(f"   modelArgs.checkpointShowInfo: {request_body['modelArgs']['checkpointShowInfo']}")
258 |         print(f"   modelArgs.loraArgs: {request_body['modelArgs']['loraArgs']}")
259 |         print(f"   promptArgs.prompt: {request_body['promptArgs']['prompt'][:50]}...")
260 |         print(f"   basicDiffusionArgs.width: {request_body['basicDiffusionArgs']['width']}")
261 |         print(f"   basicDiffusionArgs.height: {request_body['basicDiffusionArgs']['height']}")
262 |         print(f"   basicDiffusionArgs.numImagesPerPrompt: {request_body['basicDiffusionArgs']['numImagesPerPrompt']}")
263 |         
264 |         csrf_token = extract_csrf_token_enhanced(cookie)
265 |         trace_id = generate_trace_id_enhanced()
266 |         print(f"🔐 CSRF Token: {csrf_token}")
267 |         print(f"🆔 Trace ID: {trace_id}")
268 | 
269 |         
270 |         print("🌐 开始发送请求到ModelScope API...")
271 |         
272 |         response = requests.post(
273 |             api_url,
274 |             headers=headers,
275 |             json=request_body,
276 |             timeout=30  # 设置30秒超时
277 |         )
278 |         
279 |         print("📥 收到API响应:")
280 |         print(f"   状态码: {response.status_code}")
281 |         print(f"   响应头: {dict(response.headers)}")
282 |         print(f"   响应内容: {response.text}")
283 | 
284 |         
285 |         if not response.ok:
286 |             print(f"❌ API请求失败!")
287 |             print(f"   状态码: {response.status_code}")
288 |             print(f"   错误信息: {response.text}")
289 | 
290 |             return jsonify({'success': False, 'error': f'API请求失败，状态码: {response.status_code}'})
291 |         
292 |         result = response.json()
293 |         print("✅ API请求成功!")
294 |         print(f"📋 解析后的响应: {result}")
295 | 
296 |         
297 |         # 检查是否有错误信息
298 |         if 'Data' in result and result['Data'] and 'code' in result['Data'] and result['Data']['code'] != 0:
299 |             error_msg = result['Data'].get('message', '未知错误')
300 |             print(f"❌ API返回业务错误: {error_msg}")
301 | 
302 |             if '会话已过期' in error_msg:
303 |                 return jsonify({'success': False, 'error': 'Cookie已过期，请重新登录获取新的Cookie'})
304 |             return jsonify({'success': False, 'error': f'API返回错误: {error_msg}'})
305 |         
306 |         # 提取任务ID
307 |         task_id = None
308 |         print("🔍 开始提取任务ID...")
309 |         if 'data' in result and result['data'] and 'taskId' in result['data']:
310 |             task_id = result['data']['taskId']
311 |             print(f"   从 result.data.taskId 提取到: {task_id}")
312 |         elif 'Data' in result and result['Data'] and 'data' in result['Data'] and result['Data']['data'] and 'taskId' in result['Data']['data']:
313 |             task_id = result['Data']['data']['taskId']
314 |             print(f"   从 result.Data.data.taskId 提取到: {task_id}")
315 |         elif 'Data' in result and result['Data'] and 'taskId' in result['Data']:
316 |             task_id = result['Data']['taskId']
317 |             print(f"   从 result.Data.taskId 提取到: {task_id}")
318 |         elif 'taskId' in result:
319 |             task_id = result['taskId']
320 |             print(f"   从 result.taskId 提取到: {task_id}")
321 |         
322 |         if not task_id:
323 |             print("❌ 未能提取到任务ID!")
324 |             print(f"   完整响应结构: {result}")
325 |             logging.error(f'未获取到任务ID，API响应结构: {result}')
326 |             return jsonify({'success': False, 'error': '未获取到任务ID，请检查Cookie是否有效'})
327 |         
328 |         print(f"🎯 成功获取任务ID: {task_id}")
329 |         logging.info(f'获取到任务ID: {task_id}')
330 |         
331 |         # 轮询获取图片结果
332 |         import time
333 |         base_poll_url = 'https://www.modelscope.cn/api/v1/muse/predict/task/status'
334 |         max_retries = 60
335 |         retry_interval = 3
336 |         
337 |         print("=" * 80)
338 |         print("🔄 STATUS查询 - 开始轮询任务状态")
339 |         print("=" * 80)
340 |         print(f"🎯 任务ID: {task_id}")
341 |         print(f"🔗 查询URL: {base_poll_url}")
342 |         print(f"⏱️ 最大重试次数: {max_retries}")
343 |         print(f"⏰ 重试间隔: {retry_interval}秒")
344 |         
345 |         # 为轮询请求创建请求头
346 |         poll_headers = {
347 |             'Accept': 'application/json, text/plain, */*',
348 |             'Accept-Encoding': 'gzip, deflate, br, zstd',
349 |             'Accept-Language': 'zh-CN,zh;q=0.9',
350 |             'Bx-V': '2.5.31',
351 |             'Connection': 'keep-alive',
352 |             'Cookie': cookie,
353 |             'Host': 'www.modelscope.cn',
354 |             'Referer': 'https://www.modelscope.cn/aigc/imageGeneration?tab=advanced&presetId=5804',
355 |             'Sec-Ch-Ua': '"Chromium";v="140", "Not=A?Brand";v="24", "Google Chrome";v="140"',
356 |             'Sec-Ch-Ua-Mobile': '?0',
357 |             'Sec-Ch-Ua-Platform': '"Windows"',
358 |             'Sec-Fetch-Dest': 'empty',
359 |             'Sec-Fetch-Mode': 'cors',
360 |             'Sec-Fetch-Site': 'same-origin',
361 |             'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36',
362 |             'X-Modelscope-Accept-Language': 'zh_CN',
363 |             'X-Modelscope-Trace-Id': generate_trace_id_enhanced()
364 |         }
365 |         
366 |         for i in range(max_retries):
367 |             time.sleep(retry_interval)
368 |             
369 |             try:
370 |                 print(f"\n🔍 第{i+1}/{max_retries}次查询任务状态")
371 | 
372 |                 
373 |                 # 使用GET方法和URL查询参数
374 |                 poll_url = f'{base_poll_url}?taskId={task_id}'
375 |                 
376 |                 print(f"   📡 请求URL: {poll_url}")
377 |                 print(f"   🍪 Cookie (前50字符): {cookie[:50]}...")
378 | 
379 |                 
380 |                 poll_response = requests.get(
381 |                     poll_url,
382 |                     headers=poll_headers,
383 |                     timeout=10
384 |                 )
385 |                 
386 |                 print(f"   📥 响应状态码: {poll_response.status_code}")
387 |                 print(f"   📄 响应内容: {poll_response.text}")
388 |                 
389 |                 if poll_response.status_code == 200:
390 |                     try:
391 |                         response_json = poll_response.json()
392 |                         print(f"   ✅ 成功解析JSON: {response_json}")
393 | 
394 |                         
395 |                         # 处理不同格式的响应结构 - 参考111.py的完善逻辑
396 |                         task_data = None
397 |                         status = ''
398 |                         progress = {}
399 |                         percent = 0
400 |                         detail = ''
401 |                         
402 |                         print(f"   🔍 解析响应结构...")
403 |                         
404 |                         # 优先处理实际日志中看到的响应结构
405 |                         if response_json.get('Success') and response_json.get('Data'):
406 |                             data = response_json['Data']
407 |                             print(f"   📊 Data字段: {data}")
408 |                             
409 |                             # 检查Data中是否有data字段（实际日志中的结构）
410 |                             if data.get('data'):
411 |                                 task_data = data['data']
412 |                             # 同时兼容之前代码期望的结构
413 |                             elif data.get('success') and data.get('data'):
414 |                                 task_data = data['data']
415 |                             
416 |                             # 如果获取到了task_data
417 |                             if task_data:
418 |                                 status = task_data.get('status', '')
419 |                                 progress = task_data.get('progress', {})
420 |                                 percent = progress.get('percent', 0) if progress else 0
421 |                                 detail = progress.get('detail', '') if progress else ''
422 |                                 
423 |                                 print(f"   📈 任务状态: {status}")
424 |                                 print(f"   📊 进度: {percent}%")
425 |                                 print(f"   📝 详情: {detail}")
426 | 
427 |                         else:
428 |                             print(f"   ❌ 响应结构异常 - Success: {response_json.get('Success')}, Data: {response_json.get('Data')}")
429 |                         
430 |                         # 处理任务状态 - 增强版本，支持更多状态
431 |                         if task_data and status == 'COMPLETED' and task_data.get('predictResult'):
432 |                             print(f"   🎉 任务完成！获取结果...")
433 | 
434 |                             # 提取图片URL - 适配不同的响应结构
435 |                             images = []
436 |                             if isinstance(task_data['predictResult'], list):
437 |                                 images = [item.get('url') for item in task_data['predictResult'] if item and item.get('url')]
438 |                             elif isinstance(task_data['predictResult'], dict) and task_data['predictResult'].get('results'):
439 |                                 images = [item.get('url') for item in task_data['predictResult']['results'] if item and item.get('url')]
440 |                             
441 |                             if images:
442 |                                 print(f"   ✅ 图片生成成功，获取到{len(images)}张图片")
443 | 
444 |                                 return jsonify({'success': True, 'images': images, 'task_id': task_id})
445 |                             else:
446 |                                 print(f"   ❌ 图片生成成功但未找到图片URL")
447 |                                 logging.error('图片生成成功但未找到图片URL')
448 |                                 return jsonify({'success': False, 'error': '图片生成成功但未找到图片URL'})
449 |                         elif task_data and status == 'FAILED':
450 |                             error_msg = task_data.get('errorMsg', '未知错误')
451 |                             print(f"   ❌ 任务失败: {error_msg}")
452 |                             logging.error(f'任务失败: {error_msg}')
453 |                             return jsonify({'success': False, 'error': f'任务失败: {error_msg}'})
454 |                         elif task_data and status in ('PROCESSING', 'QUEUING', 'PENDING'):
455 |                             # 任务仍在处理中，返回进度信息给前端
456 |                             queue_info = detail
457 |                             if status == 'PENDING' and task_data.get('taskQueue'):
458 |                                 task_queue = task_data['taskQueue']
459 |                                 queue_info = f"排队中，共有{task_queue.get('total', '未知')}人在排队，您在第{task_queue.get('currentPosition', '未知')}位"
460 |                             elif status == 'QUEUING':
461 |                                 if not queue_info:
462 |                                     queue_info = "正在排队，请稍候..."
463 |                             elif status == 'PROCESSING':
464 |                                 if not queue_info:
465 |                                     queue_info = f"正在生成图片中...进度: {percent}%"
466 |                             
467 |                             print(f"   ⏳ 任务{status}中: {queue_info}")
468 |                             logging.info(f'任务{status}中: {queue_info}')
469 |                             continue
470 |                         elif task_data and status in ('SUCCESS', 'SUCCEED'):
471 |                             # 处理成功状态 - 增强版本，支持多种URL提取方式
472 |                             images = []
473 |                             print(f"   🎉 任务成功状态，开始提取图片URL...")
474 |                             logging.debug(f'任务成功状态，task_data结构: {str(task_data)[:500]}...')
475 |                             
476 |                             # 尝试从不同位置提取图片URL，增强兼容性
477 |                             try:
478 |                                 # 从Data.data.predictResult中提取URL（根据日志中的实际响应结构）
479 |                                 if 'Data' in response_json and isinstance(response_json['Data'], dict):
480 |                                     data_obj = response_json['Data']
481 |                                     if 'data' in data_obj and isinstance(data_obj['data'], dict):
482 |                                         inner_data = data_obj['data']
483 |                                         if 'predictResult' in inner_data and isinstance(inner_data['predictResult'], dict):
484 |                                             predict_result = inner_data['predictResult']
485 |                                             if predict_result.get('imageUrl'):
486 |                                                 images = [predict_result['imageUrl']]
487 |                                                 print(f"   📍 从Data.data.predictResult.imageUrl提取图片URL")
488 |                                             # 从predictResult中直接提取image_list字段
489 |                                             elif predict_result.get('image_list'):
490 |                                                 images = predict_result['image_list']
491 |                                                 print(f"   📍 从Data.data.predictResult.image_list提取图片URL列表")
492 |                                 
493 |                                 # 备选方案1：从task_data.results中提取
494 |                                 if not images and task_data.get('results'):
495 |                                     images = [item.get('url') for item in task_data['results'] if item and item.get('url')]
496 |                                     print(f"   📍 从task_data.results提取到{len(images)}张图片")
497 |                                 
498 |                                 # 备选方案2：从task_data.predictResult中提取
499 |                                 if not images and task_data.get('predictResult'):
500 |                                     predict_result = task_data['predictResult']
501 |                                     if isinstance(predict_result, list):
502 |                                         images = [item.get('url') for item in predict_result if item and item.get('url')]
503 |                                     elif isinstance(predict_result, dict):
504 |                                         if predict_result.get('results'):
505 |                                             images = [item.get('url') for item in predict_result['results'] if item and item.get('url')]
506 |                                         elif predict_result.get('url'):
507 |                                             images = [predict_result['url']]
508 |                                         # 直接从predictResult中提取image_list
509 |                                         elif predict_result.get('image_list'):
510 |                                             images = predict_result['image_list']
511 |                                     print(f"   📍 从task_data.predictResult提取到{len(images)}张图片")
512 |                                 
513 |                                 # 备选方案3：递归搜索响应中所有URL
514 |                                 if not images:
515 |                                     def find_urls(obj, urls=None):
516 |                                         if urls is None:
517 |                                             urls = []
518 |                                         if isinstance(obj, dict):
519 |                                             for k, v in obj.items():
520 |                                                 if k.lower() in ('url', 'imageurl', 'image_url') and isinstance(v, str):
521 |                                                     urls.append(v)
522 |                                                 elif isinstance(v, (dict, list)):
523 |                                                     find_urls(v, urls)
524 |                                         elif isinstance(obj, list):
525 |                                             for item in obj:
526 |                                                 find_urls(item, urls)
527 |                                         return urls
528 |                                     
529 |                                     # 递归搜索所有可能的URL
530 |                                     all_urls = find_urls(response_json)
531 |                                     # 过滤出看起来像图片的URL
532 |                                     image_extensions = ('.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp')
533 |                                     candidate_images = [url for url in all_urls if url.lower().endswith(image_extensions)]
534 |                                     
535 |                                     if candidate_images:
536 |                                         images = candidate_images
537 |                                         print(f"   📍 通过递归搜索找到了{len(images)}张图片URL")
538 |                                 
539 |                                 # 记录详细日志便于调试
540 |                                 if not images:
541 |                                     print(f"   ❌ 未能提取图片URL，响应结构可能已更改")
542 |                                     logging.error('未能提取图片URL，响应结构可能已更改')
543 |                                     logging.debug(f'详细response_json: {str(response_json)[:1000]}')
544 |                             except Exception as e:
545 |                                 print(f"   ❌ 提取图片URL时异常: {e}")
546 |                                 logging.error(f'提取图片URL时异常: {str(e)}')
547 |                             
548 |                             if images:
549 |                                 print(f"   ✅ 图片生成成功，获取到{len(images)}张图片")
550 |                                 logging.info(f'图片生成成功，获取到{len(images)}张图片')
551 |                                 return jsonify({'success': True, 'images': images, 'task_id': task_id})
552 |                             else:
553 |                                 print(f"   ❌ 图片生成成功但未找到图片URL")
554 |                                 logging.error('图片生成成功但未找到图片URL')
555 |                                 logging.debug(f'最终response_json结构: {str(response_json)[:500]}...')
556 |                                 return jsonify({'success': False, 'error': '图片生成成功但未找到图片URL'})
557 |                         elif response_json.get('code') == 0 and response_json.get('data'):
558 |                             # 尝试兼容旧结构
559 |                             data = response_json['data']
560 |                             status = data.get('status', '')
561 |                             
562 |                             if status == 'SUCCESS':
563 |                                 # 提取图片URL
564 |                                 images = [result['url'] for result in data['results']]
565 |                                 print(f"   ✅ 图片生成成功，获取到{len(images)}张图片")
566 |                                 logging.info(f'图片生成成功，获取到{len(images)}张图片')
567 |                                 return jsonify({'success': True, 'images': images, 'task_id': task_id})
568 |                             elif status == 'FAILED':
569 |                                 error_msg = data.get('errorMsg', '未知错误')
570 |                                 print(f"   ❌ 图片生成失败: {error_msg}")
571 | 
572 |                                 return jsonify({'success': False, 'error': f'图片生成失败: {error_msg}'})
573 |                         else:
574 |                             print(f"   ⚠️ 未知状态或数据结构: status={status}, task_data={task_data}")
575 | 
576 |                             
577 |                     except Exception as e:
578 |                         print(f"   ❌ JSON解析失败: {e}")
579 |                         print(f"   📄 原始响应内容: {poll_response.text}")
580 |                         logging.error(f'解析JSON响应失败: {e}')
581 |                         continue
582 |                 else:
583 |                     print(f"   ❌ 请求失败，状态码: {poll_response.status_code}")
584 |                     print(f"   📄 响应内容: {poll_response.text}")
585 |                     logging.error(f'轮询请求失败，状态码: {poll_response.status_code}')
586 |                     continue
587 |                     
588 |             except Exception as e:
589 |                 print(f"   ❌ 请求异常: {e}")
590 |                 logging.error(f'轮询请求异常: {e}')
591 |                 continue
592 |         
593 |         print("=" * 80)
594 |         print("⏰ 轮询超时 - 任务未在预期时间内完成")
595 |         print("=" * 80)
596 |         logging.error('轮询超时，任务未在预期时间内完成')
597 |         return jsonify({'success': False, 'error': '任务超时，请稍后重试'})
598 | 
599 |     except requests.exceptions.RequestException as e:
600 |         logging.error(f'请求ModelScope API时出错: {e}')
601 |         return jsonify({'success': False, 'error': f'请求ModelScope API时出错: {e}'})
602 |     except Exception as e:
603 |         logging.error(f'生成图片时出错: {e}')
604 |         return jsonify({'success': False, 'error': f'生成图片时出错: {e}'})
605 | 
606 | @main_bp.route('/reverse_image', methods=['POST'])
607 | def reverse_image():
608 |     data = request.get_json()
609 |     image_url = data.get('image_url')
610 | 
611 |     if not image_url:
612 |         return jsonify({'success': False, 'message': '缺少图片URL！'})
613 | 
614 |     try:
615 |         # 发送GET请求下载图片
616 |         response = requests.get(image_url, stream=True)
617 |         response.raise_for_status()  # 如果请求失败，则抛出异常
618 | 
619 |         # 创建一个临时文件来保存图片
620 |         temp_dir = current_app.config['UPLOAD_FOLDER']
621 |         if not os.path.exists(temp_dir):
622 |             os.makedirs(temp_dir)
623 |         
624 |         # 从URL中提取文件名，如果无法提取则生成一个唯一的文件名
625 |         filename = os.path.basename(image_url.split('?')[0])
626 |         if not filename:
627 |             filename = str(uuid.uuid4()) + '.jpg'
628 |         else:
629 |             filename = secure_filename(filename)
630 | 
631 |         temp_image_path = os.path.join(temp_dir, filename)
632 | 
633 |         with open(temp_image_path, 'wb') as f:
634 |             for chunk in response.iter_content(chunk_size=8192):
635 |                 f.write(chunk)
636 | 
637 |         # 图片下载成功后，调用analyze_image进行分析
638 |         success, result = analyze_image(temp_image_path, api_key=current_app.config['OPENAI_API_KEY'])
639 |         
640 |         if success:
641 |             return jsonify({'success': True, 'prompt': result})
642 |         else:
643 |             return jsonify({'success': False, 'error': result})
644 |     except Exception as e:
645 |         return jsonify({'success': False, 'error': str(e)})


--------------------------------------------------------------------------------