Spaces:

Nipun
/

api-testing

Running

App Files Files Community

Nipun commited on 29 days ago

Commit

685321f

1 Parent(s): a4a1f1b

Add interactive API Explorer UI at root

Browse files

Files changed (1) hide show

app.py +396 -4

app.py CHANGED Viewed

@@ -56,11 +56,12 @@ next_id = 4
 # ROOT & INFO ENDPOINTS
 # ============================================================================
-@app.get("/", tags=["Info"])
-def root():
-    """Welcome endpoint with API overview"""
     return {
         "message": "Welcome to the API Teaching Tool!",
         "documentation": "/docs",
         "endpoints": {
             "GET examples": ["/hello", "/items", "/items/{id}", "/greet"],
@@ -69,10 +70,401 @@ def root():
             "DELETE examples": ["/items/{id}"],
             "PATCH examples": ["/items/{id}"],
             "Response formats": ["/format/json", "/format/text", "/format/html", "/format/xml"],
-            "Educational": ["/echo", "/headers", "/status/{code}", "/delay/{seconds}"],
         }
     }
 # ============================================================================
 # SIMPLE GET ENDPOINTS
 # ============================================================================

 # ROOT & INFO ENDPOINTS
 # ============================================================================
+@app.get("/api", tags=["Info"])
+def api_info():
+    """API overview endpoint"""
     return {
         "message": "Welcome to the API Teaching Tool!",
+        "ui": "/",
         "documentation": "/docs",
         "endpoints": {
             "GET examples": ["/hello", "/items", "/items/{id}", "/greet"],
             "DELETE examples": ["/items/{id}"],
             "PATCH examples": ["/items/{id}"],
             "Response formats": ["/format/json", "/format/text", "/format/html", "/format/xml"],
+            "Educational": ["/echo", "/headers", "/status/{code}"],
         }
     }
+@app.get("/", response_class=HTMLResponse, tags=["Info"])
+def ui():
+    """Interactive API Explorer UI"""
+    return """
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>API Explorer</title>
+    <style>
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+        body {
+            font-family: 'Segoe UI', system-ui, sans-serif;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            min-height: 100vh;
+            color: #e4e4e4;
+            padding: 20px;
+        }
+        .container { max-width: 1200px; margin: 0 auto; }
+        h1 {
+            text-align: center;
+            margin-bottom: 10px;
+            font-size: 2.5em;
+            background: linear-gradient(90deg, #00d9ff, #00ff88);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .subtitle { text-align: center; color: #888; margin-bottom: 30px; }
+        .main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+        @media (max-width: 900px) { .main-grid { grid-template-columns: 1fr; } }
+        .panel {
+            background: rgba(255,255,255,0.05);
+            border-radius: 16px;
+            padding: 20px;
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        .panel h2 {
+            font-size: 1.1em;
+            margin-bottom: 15px;
+            color: #00d9ff;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        /* Request Section */
+        .request-line {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 15px;
+        }
+        select, input, textarea, button {
+            font-family: inherit;
+            font-size: 14px;
+            border: none;
+            border-radius: 8px;
+            outline: none;
+        }
+        .method-select {
+            padding: 12px 15px;
+            background: #2d2d44;
+            color: #fff;
+            font-weight: 600;
+            cursor: pointer;
+            min-width: 110px;
+        }
+        .url-input {
+            flex: 1;
+            padding: 12px 15px;
+            background: #2d2d44;
+            color: #fff;
+        }
+        .url-input::placeholder { color: #666; }
+        .send-btn {
+            padding: 12px 30px;
+            background: linear-gradient(90deg, #00d9ff, #00ff88);
+            color: #1a1a2e;
+            font-weight: 700;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        .send-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 20px rgba(0,217,255,0.3);
+        }
+        .send-btn:active { transform: translateY(0); }
+        /* Tabs */
+        .tabs {
+            display: flex;
+            gap: 5px;
+            margin-bottom: 10px;
+        }
+        .tab {
+            padding: 8px 16px;
+            background: transparent;
+            color: #888;
+            cursor: pointer;
+            border-radius: 6px;
+            transition: all 0.2s;
+        }
+        .tab:hover { color: #fff; }
+        .tab.active { background: #2d2d44; color: #00d9ff; }
+        .tab-content { display: none; }
+        .tab-content.active { display: block; }
+        textarea {
+            width: 100%;
+            min-height: 150px;
+            padding: 12px;
+            background: #1a1a2e;
+            color: #e4e4e4;
+            resize: vertical;
+            font-family: 'Fira Code', 'Consolas', monospace;
+            font-size: 13px;
+            line-height: 1.5;
+        }
+        /* Response */
+        .response-meta {
+            display: flex;
+            gap: 15px;
+            margin-bottom: 15px;
+            flex-wrap: wrap;
+        }
+        .meta-item {
+            padding: 6px 12px;
+            background: #2d2d44;
+            border-radius: 6px;
+            font-size: 13px;
+        }
+        .status-ok { color: #00ff88; }
+        .status-err { color: #ff6b6b; }
+        .status-warn { color: #ffd93d; }
+        .response-body {
+            background: #1a1a2e;
+            border-radius: 8px;
+            padding: 15px;
+            font-family: 'Fira Code', 'Consolas', monospace;
+            font-size: 13px;
+            line-height: 1.6;
+            overflow-x: auto;
+            white-space: pre-wrap;
+            word-break: break-word;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+        /* Examples */
+        .examples {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 10px;
+            margin-top: 20px;
+        }
+        .example-btn {
+            padding: 12px 15px;
+            background: rgba(255,255,255,0.05);
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 10px;
+            cursor: pointer;
+            text-align: left;
+            transition: all 0.2s;
+        }
+        .example-btn:hover {
+            background: rgba(0,217,255,0.1);
+            border-color: rgba(0,217,255,0.3);
+        }
+        .example-method {
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-size: 11px;
+            font-weight: 700;
+            margin-right: 8px;
+        }
+        .method-GET { background: #00ff88; color: #1a1a2e; }
+        .method-POST { background: #ffd93d; color: #1a1a2e; }
+        .method-PUT { background: #00d9ff; color: #1a1a2e; }
+        .method-DELETE { background: #ff6b6b; color: #1a1a2e; }
+        .method-PATCH { background: #c084fc; color: #1a1a2e; }
+        .example-title { font-weight: 600; margin-bottom: 4px; }
+        .example-desc { font-size: 12px; color: #888; }
+        .links { text-align: center; margin-top: 20px; }
+        .links a {
+            color: #00d9ff;
+            text-decoration: none;
+            margin: 0 15px;
+        }
+        .links a:hover { text-decoration: underline; }
+        /* Loading */
+        .loading { opacity: 0.6; pointer-events: none; }
+        /* JSON syntax highlighting */
+        .json-key { color: #00d9ff; }
+        .json-string { color: #00ff88; }
+        .json-number { color: #ffd93d; }
+        .json-boolean { color: #c084fc; }
+        .json-null { color: #888; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>API Explorer</h1>
+        <p class="subtitle">Learn HTTP methods by doing - no setup required</p>
+        <div class="main-grid">
+            <div class="panel">
+                <h2>Request</h2>
+                <div class="request-line">
+                    <select class="method-select" id="method">
+                        <option value="GET">GET</option>
+                        <option value="POST">POST</option>
+                        <option value="PUT">PUT</option>
+                        <option value="PATCH">PATCH</option>
+                        <option value="DELETE">DELETE</option>
+                    </select>
+                    <input type="text" class="url-input" id="url" placeholder="/hello" value="/hello">
+                    <button class="send-btn" id="send">Send</button>
+                </div>
+                <div class="tabs">
+                    <button class="tab active" data-tab="body">Body</button>
+                    <button class="tab" data-tab="headers">Headers</button>
+                </div>
+                <div class="tab-content active" id="body-tab">
+                    <textarea id="body" placeholder='{"name": "Laptop", "price": 999.99, "quantity": 5}'></textarea>
+                </div>
+                <div class="tab-content" id="headers-tab">
+                    <textarea id="headers" placeholder="Content-Type: application/json">Content-Type: application/json</textarea>
+                </div>
+            </div>
+            <div class="panel">
+                <h2>Response</h2>
+                <div class="response-meta" id="meta">
+                    <span class="meta-item">Status: <span id="status">-</span></span>
+                    <span class="meta-item">Time: <span id="time">-</span></span>
+                    <span class="meta-item">Size: <span id="size">-</span></span>
+                </div>
+                <div class="response-body" id="response">Send a request to see the response...</div>
+            </div>
+        </div>
+        <div class="panel" style="margin-top: 20px;">
+            <h2>Try These Examples</h2>
+            <div class="examples" id="examples"></div>
+        </div>
+        <div class="links">
+            <a href="/docs">Swagger Docs</a>
+            <a href="/api">API Info</a>
+        </div>
+    </div>
+    <script>
+        const examples = [
+            { method: 'GET', url: '/hello', title: 'Hello World', desc: 'Simplest GET request' },
+            { method: 'GET', url: '/time', title: 'Server Time', desc: 'Get current timestamp' },
+            { method: 'GET', url: '/greet?name=Student', title: 'Query Parameter', desc: 'Pass data via URL' },
+            { method: 'GET', url: '/greet/Alice', title: 'Path Parameter', desc: 'Data in the URL path' },
+            { method: 'GET', url: '/items', title: 'List Items', desc: 'Get all items in store' },
+            { method: 'GET', url: '/items/1', title: 'Get One Item', desc: 'Fetch item by ID' },
+            { method: 'POST', url: '/items', title: 'Create Item', desc: 'Add new item to store', body: '{"name": "Laptop", "price": 999.99, "quantity": 5}' },
+            { method: 'POST', url: '/echo', title: 'Echo JSON', desc: 'Server echoes your data', body: '{"message": "Hello!", "count": 42}' },
+            { method: 'PUT', url: '/items/1', title: 'Replace Item', desc: 'Full update of item', body: '{"name": "Green Apple", "price": 2.50, "quantity": 200}' },
+            { method: 'PATCH', url: '/items/1', title: 'Partial Update', desc: 'Update only price', body: '{"price": 1.99}' },
+            { method: 'DELETE', url: '/items/3', title: 'Delete Item', desc: 'Remove item from store' },
+            { method: 'GET', url: '/format/json', title: 'JSON Response', desc: 'Default JSON format' },
+            { method: 'GET', url: '/format/xml', title: 'XML Response', desc: 'XML formatted data' },
+            { method: 'GET', url: '/format/html', title: 'HTML Response', desc: 'Returns HTML page' },
+            { method: 'GET', url: '/headers', title: 'See Headers', desc: 'View request headers' },
+            { method: 'GET', url: '/status/404', title: 'Error 404', desc: 'Test error handling' },
+            { method: 'GET', url: '/status/201', title: 'Status 201', desc: 'Created status code' },
+            { method: 'GET', url: '/method', title: 'Method Check', desc: 'Shows HTTP method used' },
+        ];
+        // Render examples
+        const examplesContainer = document.getElementById('examples');
+        examples.forEach(ex => {
+            const btn = document.createElement('button');
+            btn.className = 'example-btn';
+            btn.innerHTML = `
+                <div class="example-title">
+                    <span class="example-method method-${ex.method}">${ex.method}</span>
+                    ${ex.title}
+                </div>
+                <div class="example-desc">${ex.url}</div>
+            `;
+            btn.onclick = () => loadExample(ex);
+            examplesContainer.appendChild(btn);
+        });
+        function loadExample(ex) {
+            document.getElementById('method').value = ex.method;
+            document.getElementById('url').value = ex.url;
+            document.getElementById('body').value = ex.body || '';
+        }
+        // Tab switching
+        document.querySelectorAll('.tab').forEach(tab => {
+            tab.onclick = () => {
+                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+                document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+                tab.classList.add('active');
+                document.getElementById(tab.dataset.tab + '-tab').classList.add('active');
+            };
+        });
+        // Syntax highlighting for JSON
+        function highlightJSON(json) {
+            if (typeof json !== 'string') json = JSON.stringify(json, null, 2);
+            return json
+                .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+                .replace(/"([^"]+)":/g, '<span class="json-key">"$1"</span>:')
+                .replace(/: "([^"]*)"/g, ': <span class="json-string">"$1"</span>')
+                .replace(/: (\\d+\\.?\\d*)/g, ': <span class="json-number">$1</span>')
+                .replace(/: (true|false)/g, ': <span class="json-boolean">$1</span>')
+                .replace(/: (null)/g, ': <span class="json-null">$1</span>');
+        }
+        // Send request
+        async function sendRequest() {
+            const method = document.getElementById('method').value;
+            const url = document.getElementById('url').value;
+            const body = document.getElementById('body').value;
+            const headersText = document.getElementById('headers').value;
+            const headers = {};
+            headersText.split('\\n').forEach(line => {
+                const [key, ...vals] = line.split(':');
+                if (key && vals.length) headers[key.trim()] = vals.join(':').trim();
+            });
+            const opts = { method, headers };
+            if (['POST', 'PUT', 'PATCH'].includes(method) && body) {
+                opts.body = body;
+            }
+            document.getElementById('send').classList.add('loading');
+            const start = performance.now();
+            try {
+                const res = await fetch(url, opts);
+                const elapsed = Math.round(performance.now() - start);
+                const text = await res.text();
+                // Update status
+                const statusEl = document.getElementById('status');
+                statusEl.textContent = res.status + ' ' + res.statusText;
+                statusEl.className = res.ok ? 'status-ok' : (res.status >= 500 ? 'status-err' : 'status-warn');
+                document.getElementById('time').textContent = elapsed + 'ms';
+                document.getElementById('size').textContent = (text.length / 1024).toFixed(2) + ' KB';
+                // Try to format as JSON
+                let display;
+                try {
+                    const json = JSON.parse(text);
+                    display = highlightJSON(JSON.stringify(json, null, 2));
+                } catch {
+                    display = text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+                }
+                document.getElementById('response').innerHTML = display;
+            } catch (err) {
+                document.getElementById('status').textContent = 'Error';
+                document.getElementById('status').className = 'status-err';
+                document.getElementById('response').textContent = 'Request failed: ' + err.message;
+            }
+            document.getElementById('send').classList.remove('loading');
+        }
+        document.getElementById('send').onclick = sendRequest;
+        document.getElementById('url').onkeydown = (e) => { if (e.key === 'Enter') sendRequest(); };
+        // Send initial request
+        sendRequest();
+    </script>
+</body>
+</html>
+"""
 # ============================================================================
 # SIMPLE GET ENDPOINTS
 # ============================================================================