newapi-special-test/index.html at main · CookSleep/newapi-special-test · GitHub

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>New API 特殊调用测试</title>
  <link rel="stylesheet" href="assets/css/styles.css" />
</head>
<body>
  <div class="container">
    <header class="header">
      <h1>New API 特殊调用测试</h1>
      <p>测试 OpenAI/Anthropic/Google 的一些特殊调用方式</p>
      <p class="subnote">纯前端网页，所有信息仅存储在您的浏览器本地</p>
      <p class="subnote github-link">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
        </svg>
        <a href="https://github.com/CookSleep/newapi-special-test" target="_blank" rel="noopener">@CookSleep</a>
      </p>
    </header>

    <main class="main-card">
      <section class="config-section">
        <div class="config-header">
          <h2>API 配置</h2>
          <div class="btn-group">
            <button class="btn btn-secondary" id="manageConfigBtn">管理配置</button>
          </div>
        </div>

        <div class="grid-3 input-row">
          <div class="input-group">
            <label for="apiUrl">API URL</label>
            <input type="text" id="apiUrl" placeholder="例如：https://api.openai.com" />
          </div>
          <div class="input-group">
            <label for="apiKey">API Key</label>
            <div class="password-input-wrapper">
              <input type="password" id="apiKey" placeholder="例如：sk-xxxxxxxxxxxx" />
              <button type="button" class="password-toggle" data-target="apiKey" aria-label="显示/隐藏密码">
                <svg class="eye-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
                </svg>
                <svg class="eye-off-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="display: none;">
                  <path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/>
                </svg>
              </button>
            </div>
          </div>
          <div class="input-group">
            <label for="model">模型</label>
            <input type="text" id="model" placeholder="例如：gpt-4o" />
          </div>
        </div>
      </section>

      <section class="test-section">
        <h2>测试内容</h2>
        <p class="muted">在下方选择测试类型，编辑用户消息，然后发送请求。结果将按轮次与请求分块展示。</p>

        <div class="segmented" id="vendorType">
          <button class="seg-btn active" data-vendor="openai">OpenAI</button>
          <button class="seg-btn" data-vendor="anthropic">Anthropic</button>
          <button class="seg-btn" data-vendor="google">Google</button>
        </div>
        <div class="segmented" id="testType">
          <!-- 由JS动态渲染 -->
        </div>

        <div class="input-group">
          <label for="userInput">用户消息</label>
          <textarea id="userInput" class="input-textarea" rows="3" placeholder="请输入本次测试的用户消息"></textarea>
        </div>
        <div class="btn-row">
          <button class="btn btn-primary" id="testBtn">发送测试请求</button>
          <button class="btn" id="clearBtn">清空结果</button>
        </div>

        <div class="split-columns">
          <div class="column">
            <h3>轮次与消息</h3>
            <div id="messageTimeline" class="timeline"></div>
          </div>
          <div class="column">
            <h3>请求与响应</h3>
            <div id="blocksContainer" class="blocks-container"></div>
          </div>
        </div>

        <div id="errorMessage" class="error-message"></div>
      </section>
    </main>
  </div>

  <!-- 配置管理模态框 -->
  <div id="configModal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h2 id="configModalTitle">管理 API 配置</h2>
        <span class="close" id="closeConfigModal">&times;</span>
      </div>

      <div class="config-modal-body">
        <div class="modal-left">
          <h3 id="modalFormHeading" class="subheading">添加新配置</h3>

          <div class="input-group">
            <label for="configName">配置名称</label>
            <input type="text" id="configName" placeholder="例如：生产环境" />
          </div>

          <div class="input-group">
            <label for="configUrl">API URL</label>
            <input type="text" id="configUrl" placeholder="例如：https://api.openai.com" />
          </div>

          <div class="input-group">
            <label for="configKey">API Key</label>
            <div class="password-input-wrapper">
              <input type="password" id="configKey" placeholder="例如：sk-xxxxxxxxxxxx" />
              <button type="button" class="password-toggle" data-target="configKey" aria-label="显示/隐藏密码">
                <svg class="eye-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
                </svg>
                <svg class="eye-off-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="display: none;">
                  <path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/>
                </svg>
              </button>
            </div>
          </div>

          <div class="input-group">
            <label for="configModel">默认模型</label>
            <input type="text" id="configModel" placeholder="例如：gpt-4o" />
          </div>

          <div class="modal-actions">
            <button class="btn btn-primary" id="saveAsDefaultBtn">保存为默认配置</button>
            <button class="btn btn-secondary" id="saveConfigBtn">保存配置</button>
            <button class="btn btn-secondary" id="cancelEditBtn" style="display:none;">取消编辑</button>
          </div>
        </div>

        <div class="modal-right">
          <h3 class="subheading">已有配置</h3>
          <div class="config-list" id="configList"></div>
        </div>
      </div>
    </div>
  </div>

  <script src="assets/js/config.js"></script>
  <script src="assets/js/script.js"></script>
</body>
</html>