| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>DeepSeek API Explorer</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="components/navbar.js"></script> |
| <script src="components/api-key-modal.js"></script> |
| </head> |
| <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200"> |
| <custom-navbar></custom-navbar> |
| <custom-api-key-modal></custom-api-key-modal> |
|
|
| <main class="container mx-auto px-4 py-8"> |
| <div class="max-w-4xl mx-auto"> |
| <div class="text-center mb-12"> |
| <h1 class="text-4xl font-bold mb-4">DeepSeek API Explorer</h1> |
| <p class="text-lg text-gray-600 dark:text-gray-400"> |
| Explore the capabilities of the DeepSeek API with this interactive playground |
| </p> |
| </div> |
|
|
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden mb-8"> |
| <div class="p-6 border-b border-gray-200 dark:border-gray-700"> |
| <h2 class="text-xl font-semibold">API Request</h2> |
| </div> |
| |
| <div class="p-6"> |
| <div class="mb-6"> |
| <label class="block text-sm font-medium mb-2">Endpoint</label> |
| <div class="flex"> |
| <select class="bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white rounded-l-lg p-3 focus:ring-blue-500 focus:border-blue-500 block w-full"> |
| <option>POST</option> |
| <option>GET</option> |
| <option>PUT</option> |
| <option>DELETE</option> |
| </select> |
| <input type="text" value="https://api.deepseek.com/v1/chat/completions" class="bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white rounded-r-lg p-3 focus:ring-blue-500 focus:border-blue-500 block w-full"> |
| </div> |
| </div> |
|
|
| <div class="mb-6"> |
| <label class="block text-sm font-medium mb-2">Request Body</label> |
| <div class="relative"> |
| <div class="absolute top-3 right-3 flex space-x-2"> |
| <button class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> |
| <i data-feather="copy"></i> |
| </button> |
| <button class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> |
| <i data-feather="maximize-2"></i> |
| </button> |
| </div> |
| <textarea id="request-body" class="bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white rounded-lg p-3 focus:ring-blue-500 focus:border-blue-500 block w-full h-64 font-mono text-sm">{ |
| "model": "deepseek-chat", |
| "messages": [ |
| { |
| "role": "user", |
| "content": "Hello!" |
| } |
| ], |
| "temperature": 0.7 |
| }</textarea> |
| </div> |
| </div> |
|
|
| <div class="flex justify-end"> |
| <button id="send-request" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors"> |
| Send Request |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden"> |
| <div class="p-6 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center"> |
| <h2 class="text-xl font-semibold">API Response</h2> |
| <div class="flex space-x-2"> |
| <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> |
| <i data-feather="refresh-cw"></i> |
| </button> |
| <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> |
| <i data-feather="copy"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="p-6"> |
| <div class="relative"> |
| <div id="response-placeholder" class="text-center py-16 text-gray-500 dark:text-gray-400"> |
| <i data-feather="send" class="w-12 h-12 mx-auto mb-4"></i> |
| <p>Send a request to see the response here</p> |
| </div> |
| <pre id="response-content" class="hidden bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white rounded-lg p-3 w-full overflow-auto font-mono text-sm"></pre> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <script src="script.js"></script> |
| <script> |
| feather.replace(); |
| </script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
