Hugging Face's logo

Spaces:
jasonnoy
/
boss_translator
Running

App Files Community
boss_translator
File size: 7,753 Bytes 
3394804
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1812d0c
3394804
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
93b47e0
3394804
 
 
 
 
 
8d97833
3394804
 
 
 
 
 
 
 
 
 
872249d
 
 
f95ce23
 
 
3394804
 
 
 
 
 
 
 
1812d0c
3394804
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1812d0c
3394804
 
 
 
 
 
 
 
 
 
876d086
3394804
 
 
 
 
 
 
872249d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f95ce23
 
 
7aceada
f95ce23
 
 
 
 
 
 
 
 
3394804
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>反馈建议 - 解语花</title>
    <link rel="stylesheet" href="/static/styles.css">
</head>
<body>
    <div class="dark-container">
        <header>
            <div class="logo"><a href="/static/index.html">解语花</a></div>
        </header>
        
        <main class="feedback-page">
            <section class="feedback-section">
                <h2 class="section-title">情绪值</h2>
                <div class="emotion-card">
                    <div class="emotion-icons">
                        <span class="emoji">😠</span>
                        <span class="emoji">😠</span>
                        <span class="emoji">😠</span>
                    </div>
                    <div class="emotion-text">需求方对设计非常不满意，建议全面改进</div>
                </div>
            </section>
            
            <section class="feedback-section">
                <h2 class="section-title">修改建议</h2>
                <div class="suggestions-container">
                    <div class="suggestion-card yellow-top">
                        <h3 class="suggestion-title">色彩调整</h3>
                        <p class="suggestion-text">在保持整体色调的基础上，加入一些明亮的点缀色，如淡黄色、淡紫蓝、淡红蓝微粉等。用于按钮、图标或重要文本，以增加吸引力。</p>
                    </div>
                    
                    <div class="suggestion-card cyan-top">
                        <h3 class="suggestion-title">增加层级感</h3>
                        <p class="suggestion-text">利用饱和度（Glassmorphism）效果，为卡片/重要框添加模糊背景和阴影，营造出浮起感，引入3D元素或深浅变化，增加页面的深度和空间感。</p>
                    </div>
                    
                    <div class="suggestion-card purple-top">
                        <h3 class="suggestion-title">增加互动性</h3>
                        <p class="suggestion-text">为按钮和图标添加悬停动画或点击动画，提供用户及时反馈。引入微动画（Micro-interactions），如加载动画、切换动画等等，使页面更具活力。</p>
                    </div>
                </div>
            </section>
            
            <section class="feedback-section">
                <h2 class="section-title">参考案例</h2>
                <div class="examples-container">
                    <div class="example-card">
                        <img class="example-image" src="/static/assets/loading.gif" alt="参考案例1">
                        <div class="example-content">
                            <p class="example-desc">加载中...</p>
                            <div class="example-source">来源: <a href="#" target="_blank">加载中...</a></div>
                        </div>
                    </div>
                    <div class="example-card">
                        <img class="example-image" src="/static/assets/loading.gif" alt="参考案例2">
                        <div class="example-content">
                            <p class="example-desc">加载中...</p>
                            <div class="example-source">来源: <a href="#" target="_blank">加载中...</a></div>
                        </div>
                    </div>
                </div>
            </section>
            
            <section class="feedback-section">
                <h2 class="section-title">优化方案</h2>
                <div class="api-key-link">
                    <a href="#" id="apiKeyLink">想使用自己的OpenAI API Key？</a>
                </div>
                <div class="user-key-link">
                    <a href="#" id="userKeyLink">白名单用户登录密钥</a>
                </div>
                <div class="optimization-container">
                    <div class="optimization-card">
                        <div class="optimization-header">
                            <h3 class="optimization-title">方案一：GPT优化</h3>
                            <button class="generate-btn" id="gpt4-btn">生成优化</button>
                        </div>
                        <div class="optimization-content" id="gpt4-content">
                            <div class="optimization-placeholder">
                                <p>基于GPT-4o的智能优化，结合需求方反馈进行针对性修改</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="optimization-card">
                        <div class="optimization-header">
                            <h3 class="optimization-title">方案二：Dalle优化</h3>
                            <button class="generate-btn" id="mj-btn">生成创意</button>
                        </div>
                        <div class="optimization-content" id="mj-content">
                            <div class="optimization-placeholder">
                                <p>基于Dalle的创意重构，提供全新设计灵感</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <section class="feedback-section">
                <h2 class="section-title">润色</h2>
                <div class="polished-card">
                    <textarea placeholder="输入你要回复需求方的话" id="userInput"></textarea>
                </div>
                
                <!-- 生成后的文案框，初始隐藏 -->
                <div class="result-card" id="resultCard" style="display: none;">
                    <div class="result-title">优化后的文案</div>
                    <div class="result-content" id="resultContent"></div>
                </div>
            </section>
            
            <div class="button-container">
                <button type="button" class="generate-button" id="generateBtn">启动求生欲滤镜</button>
            </div>
            
            <!-- Toast提示 -->
            <div class="toast" id="toast">生成中...</div>
        </main>
    </div>
    
    <!-- API Key Input Dialog -->
    <div class="api-key-dialog" id="apiKeyDialog">
        <div class="dialog-content">
            <h3>输入OpenAI API Key</h3>
            <p class="dialog-description">请输入您的OpenAI API Key，该Key需要有生图权限(Tier1以上)。</p>
            <p class="dialog-help">
                <a href="https://platform.openai.com/settings/organization/api-keys" target="_blank">如何获取API Key？</a>
            </p>
            <input type="password" id="apiKeyInput" placeholder="输入您的API Key">
            <div class="dialog-buttons">
                <button id="saveApiKey">保存</button>
                <button id="cancelApiKey">取消</button>
            </div>
        </div>
    </div>
    
    <!-- User Key Input Dialog -->
    <div class="user-key-dialog" id="userKeyDialog">
        <div class="dialog-content">
            <h3>我是白名单用户</h3>
            <p class="dialog-description">请输入您的白名单用户密钥。</p>
            <input type="password" id="userKeyInput" placeholder="输入您的用户密钥">
            <div class="dialog-buttons">
                <button id="saveUserKey">保存</button>
                <button id="cancelUserKey">取消</button>
            </div>
        </div>
    </div>
    
    <script src="/static/script.js"></script>
</body>
</html>