feat: replace docs placeholder with interactive test page across all entry points
- Replace router.ts handleDocs static placeholder with full interactive test page - Replace worker.ts handleDocs with interactive test page - Remove dead handleDocs() from index.ts (route already serves public/test-api.html) - Update public/test-api.html with proper model defaults (deepseek-v4-flash-free) - Add cache_control system prompt field to Anthropic test card - Update handleIndex() to link to Interactive Test Page - Remove handleDocs tests from index.test.ts
This commit is contained in:
MythEclipse
+27
-34
@@ -10,50 +10,39 @@
|
||||
main { max-width: 960px; margin: 0 auto; }
|
||||
h1 { font-size: 1.5rem; color: #58a6ff; margin-bottom: 0.25rem; }
|
||||
.sub { color: #8b949e; margin-bottom: 1.5rem; font-size: 0.9rem; }
|
||||
|
||||
.card { background: #161b22; border: 1px solid #30363d; border-radius: 8px; margin-bottom: 1rem; overflow: hidden; }
|
||||
.card-header { padding: 0.75rem 1rem; background: #1c2128; border-bottom: 1px solid #30363d; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; user-select: none; }
|
||||
.card-header:hover { background: #21262d; }
|
||||
.card-header .method { font-size: 0.7rem; padding: 1px 6px; border-radius: 3px; font-weight: 600; }
|
||||
.card-header .method { font-size: 0.7rem; padding: 1px 6px; border-radius: 3px; font-weight: 600; text-transform: uppercase; }
|
||||
.get { background: #1f6feb33; color: #58a6ff; }
|
||||
.post { background: #23863633; color: #3fb950; }
|
||||
.card-body { padding: 1rem; display: none; }
|
||||
.card.open .card-body { display: block; }
|
||||
.card-header .arrow { margin-left: auto; transition: transform .15s; }
|
||||
.card.open .arrow { transform: rotate(90deg); }
|
||||
|
||||
label { display: block; font-size: 0.8rem; color: #8b949e; margin-bottom: 0.25rem; }
|
||||
input, textarea, select { width: 100%; background: #0d1117; border: 1px solid #30363d; border-radius: 4px; color: #e1e4e8; padding: 0.5rem 0.75rem; font-family: inherit; font-size: 0.9rem; margin-bottom: 0.75rem; }
|
||||
input:focus, textarea:focus { border-color: #58a6ff; outline: none; }
|
||||
textarea { min-height: 60px; resize: vertical; font-family: 'SF Mono', 'Cascadia Code', monospace; font-size: 0.8rem; }
|
||||
textarea.code { min-height: 120px; }
|
||||
|
||||
.row { display: flex; gap: 0.75rem; }
|
||||
.row > * { flex: 1; }
|
||||
|
||||
.btn { background: #238636; color: #fff; border: none; border-radius: 6px; padding: 0.5rem 1.25rem; font-size: 0.85rem; cursor: pointer; font-weight: 500; }
|
||||
.btn:hover { background: #2ea043; }
|
||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.btn-outline { background: transparent; border: 1px solid #30363d; color: #c9d1d9; }
|
||||
.btn-outline:hover { background: #21262d; border-color: #8b949e; }
|
||||
.btn-danger { background: #da3633; }
|
||||
.btn-danger:hover { background: #f85149; }
|
||||
|
||||
.output { background: #0d1117; border: 1px solid #30363d; border-radius: 4px; padding: 0.75rem; margin-top: 0.5rem; }
|
||||
.output pre { font-family: 'SF Mono', 'Cascadia Code', monospace; font-size: 0.78rem; white-space: pre-wrap; word-break: break-all; max-height: 300px; overflow: auto; color: #c9d1d9; }
|
||||
.output .meta { font-size: 0.75rem; color: #8b949e; margin-bottom: 0.5rem; }
|
||||
.output .meta .status.ok { color: #3fb950; }
|
||||
.output .meta .status.err { color: #f85149; }
|
||||
|
||||
.toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: #1c2128; border: 1px solid #30363d; border-radius: 6px; padding: 0.75rem 1rem; font-size: 0.85rem; display: none; z-index: 100; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Edge Proxy Relay — API Test</h1>
|
||||
<p class="sub">Test all proxy endpoints from the browser</p>
|
||||
<h1>Edge Proxy Relay — Interactive Test</h1>
|
||||
<p class="sub">Test all endpoints from the browser. Open a card, fill in the fields, and run.</p>
|
||||
|
||||
<!-- Global Auth -->
|
||||
<div class="card open">
|
||||
<div class="card-header">
|
||||
<span class="method get">AUTH</span> API Key
|
||||
@@ -68,7 +57,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Health -->
|
||||
<div class="card open">
|
||||
<div class="card-header" onclick="toggleCard(this)">
|
||||
<span class="method get">GET</span> /health
|
||||
@@ -80,7 +68,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Models -->
|
||||
<div class="card open">
|
||||
<div class="card-header" onclick="toggleCard(this)">
|
||||
<span class="method get">GET</span> /v1/models
|
||||
@@ -92,15 +79,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat Completions -->
|
||||
<div class="card">
|
||||
<div class="card-header" onclick="toggleCard(this)">
|
||||
<span class="method post">POST</span> /v1/chat/completions
|
||||
<span class="arrow">▶</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label>Model</label>
|
||||
<input type="text" id="chatModel" value="gpt-4o-mini" />
|
||||
<div class="row">
|
||||
<div><label>Model</label><input type="text" id="chatModel" value="deepseek-v4-flash-free" /></div>
|
||||
<div><label>Max Tokens</label><input type="number" id="chatMaxTokens" value="128" /></div>
|
||||
</div>
|
||||
<label>Messages (JSON array)</label>
|
||||
<textarea id="chatMessages" class="code">[{"role":"user","content":"Say hello in one word"}]</textarea>
|
||||
<label><input type="checkbox" id="chatStream" /> Stream (SSE)</label>
|
||||
@@ -109,26 +97,26 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Anthropic Messages -->
|
||||
<div class="card">
|
||||
<div class="card-header" onclick="toggleCard(this)">
|
||||
<span class="method post">POST</span> /v1/messages (Anthropic)
|
||||
<span class="arrow">▶</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label>Model</label>
|
||||
<input type="text" id="anthModel" value="claude-sonnet-4-6" />
|
||||
<label>Max Tokens</label>
|
||||
<input type="number" id="anthMaxTokens" value="256" />
|
||||
<div class="row">
|
||||
<div><label>Model</label><input type="text" id="anthModel" value="deepseek-v4-flash-free" /></div>
|
||||
<div><label>Max Tokens</label><input type="number" id="anthMaxTokens" value="256" /></div>
|
||||
</div>
|
||||
<label>System Prompt (optional, with cache_control)</label>
|
||||
<textarea id="anthSystem" class="code" placeholder='[{"type":"text","text":"You are helpful.","cache_control":{"type":"ephemeral"}}]'></textarea>
|
||||
<label>Messages (JSON)</label>
|
||||
<textarea id="anthMessages" class="code">[{"role":"user","content":"Say hello in one word"}]</textarea>
|
||||
<textarea id="anthMessages" class="code">[{"role":"user","content":[{"type":"text","text":"Say hello in one word","cache_control":{"type":"ephemeral"}}]}]</textarea>
|
||||
<label><input type="checkbox" id="anthStream" /> Stream (SSE)</label>
|
||||
<div style="margin-top:0.5rem"><button class="btn" onclick="callAnthropic()">Send</button></div>
|
||||
<div id="output-anth" class="output" style="display:none"><pre></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generic Relay -->
|
||||
<div class="card">
|
||||
<div class="card-header" onclick="toggleCard(this)">
|
||||
<span class="method post">RELAY</span> Generic HTTP Relay
|
||||
@@ -137,10 +125,10 @@
|
||||
<div class="card-body">
|
||||
<label>Relay Target URL</label>
|
||||
<input type="text" id="relayTarget" value="https://httpbin.org" />
|
||||
<label>Relay Path</label>
|
||||
<input type="text" id="relayPath" value="/get" />
|
||||
<label>Method</label>
|
||||
<select id="relayMethod"><option>GET</option><option>POST</option></select>
|
||||
<div class="row">
|
||||
<div><label>Relay Path</label><input type="text" id="relayPath" value="/get" /></div>
|
||||
<div><label>Method</label><select id="relayMethod"><option>GET</option><option>POST</option></select></div>
|
||||
</div>
|
||||
<label>Body (JSON, optional)</label>
|
||||
<textarea id="relayBody" class="code" placeholder='{"test":true}'></textarea>
|
||||
<div style="margin-top:0.5rem"><button class="btn" onclick="callRelay()">Send</button></div>
|
||||
@@ -247,17 +235,17 @@ async function callChat() {
|
||||
catch { showToast('Invalid messages JSON', false); return; }
|
||||
|
||||
const body = {
|
||||
model: document.getElementById('chatModel').value || 'gpt-4o-mini',
|
||||
model: document.getElementById('chatModel').value || 'deepseek-v4-flash-free',
|
||||
messages,
|
||||
stream,
|
||||
max_tokens: 128,
|
||||
max_tokens: parseInt(document.getElementById('chatMaxTokens').value) || 128,
|
||||
};
|
||||
|
||||
try {
|
||||
if (stream) {
|
||||
const el = document.getElementById('output-chat');
|
||||
el.style.display = 'block';
|
||||
el.innerHTML = `<div class="meta">streaming text/event-stream …</div><pre></pre>`;
|
||||
el.innerHTML = `<div class="meta">streaming …</div><pre></pre>`;
|
||||
const resp = await fetch(apiBase() + '/v1/chat/completions', {
|
||||
method: 'POST',
|
||||
headers: authHeaders(),
|
||||
@@ -292,11 +280,16 @@ async function callAnthropic() {
|
||||
catch { showToast('Invalid messages JSON', false); return; }
|
||||
|
||||
const body = {
|
||||
model: document.getElementById('anthModel').value || 'claude-sonnet-4-6',
|
||||
model: document.getElementById('anthModel').value || 'deepseek-v4-flash-free',
|
||||
max_tokens: parseInt(document.getElementById('anthMaxTokens').value) || 256,
|
||||
messages,
|
||||
stream,
|
||||
};
|
||||
// Parse optional system prompt with cache_control support
|
||||
const sys = document.getElementById('anthSystem').value.trim();
|
||||
if (sys) {
|
||||
try { body.system = JSON.parse(sys); } catch { body.system = sys; }
|
||||
}
|
||||
|
||||
try {
|
||||
if (stream) {
|
||||
|
||||
Reference in New Issue
Block a user