Val Town Code SearchReturn to Val Town

72          <p class="text-xs text-gray-500 mb-3"></p>
73          <div class="mb-4">
74            <div x-show="!userApiKey" class="space-y-2">
75              <label class="block text-xs text-gray-600">API Key <a href="https://console.groq.com/keys" target="_blank" class="underline hover:text-gray-600 dark:text-gray-800">(get key)</a></label>
76              <div class="flex gap-2 items-center">
77                <input type="password" x-model="apiKeyInput" placeholder="Enter your Groq API key..." class="flex-1 px-3 py-2 text-xs rounded-md focus:ring-2 focus:ring-blue-400 focus:border-transparent border-0 bg-white">
78                <button type="button" @click="setApiKey()" :disabled="!apiKeyInput.trim()" class="px-3 py-2 bg-blue-600 text-white text-xs rounded-md hover:bg-blue-700 disabled:opacity-50">Set</button>
79              </div>
80            </div>
81            <div x-show="userApiKey" class="space-y-2">
82              <label class="block text-xs text-gray-600">API Key <a href="https://console.groq.com/keys" target="_blank" class="underline hover:text-gray-600 dark:text-gray-800">(get key)</a></label>
83              <div class="flex items-center justify-between gap-2">
84                <code class="text-[11px] px-2 py-1 bg-white border border-gray-200 rounded truncate max-w-[70%]" x-text="maskedApiKey"></code>
85                <div class="flex gap-2">
86                  <button type="button" @click="changeApiKey()" class="text-[11px] hover:text-gray-700 underline">Change</button>
87                  <button type="button" @click="clearApiKey()" class="text-[11px] hover:text-gray-700 underline">Clear</button>
88                </div>
89              </div>

690  if (!text) return;
691  state.errorMessage = '';
692  if (!state.hasServerKey && !state.userApiKey) {
693    state.errorMessage = 'please add api key';
694    return;
695  }

249          </p>
250          <div class="mb-4">
251            <div x-show="!userApiKey" class="space-y-2">
252              <label class="block text-xs text-gray-600">API Key</label>
253              <div class="flex gap-2 items-center">
254                <input type="password" x-model="apiKeyInput" placeholder="Enter your Groq API key..." class="flex-1 px-3 py-2 text-xs rounded-md focus:ring-2 focus:ring-blue-400 focus:border-transparent border-0 bg-gray-50">
255                <button type="button" @click="setApiKey()" :disabled="!apiKeyInput.trim()" class="px-3 py-2 bg-blue-600 text-white text-xs rounded-md hover:bg-blue-700 disabled:opacity-50">Set</button>
256              </div>
257            </div>
258            <div x-show="userApiKey" class="space-y-2">
259              <label class="block text-xs text-gray-600">API Key</label>
260              <div class="flex items-center justify-between gap-2">
261                <code class="text-[11px] px-2 py-1 bg-gray-50 border border-gray-200 rounded truncate max-w-[70%]" x-text="maskedApiKey"></code>
262                <div class="flex gap-2">
263                  <button type="button" @click="changeApiKey()" class="text-[11px] hover:text-gray-700 underline">Change</button>
264                  <button type="button" @click="clearApiKey()" class="text-[11px] hover:text-gray-700 underline">Clear</button>
265                </div>
266              </div>

82        "imports": {
83          "@atproto/oauth-client-browser": "https://esm.sh/@atproto/oauth-client-browser@0.3.15",
84          "@atproto/api": "https://esm.sh/@atproto/api@0.15.5",
85          "three": "https://esm.sh/three@0.180.0"
86        }

37  "imports": {
38    "@atproto/oauth-client-browser": "npm:@atproto/oauth-client-browser@0.3.15",
39    "@atproto/api": "npm:@atproto/api@0.15.5",
40    "three": "npm:three@0.180.0"
41  }

4  OAuthSession,
5} from "https://esm.sh/@atproto/oauth-client-browser@0.3.15";
6import { Agent } from "https://esm.sh/@atproto/api@0.15.5";
7
8// OAuth client metadata - should match the backend configuration

16  useEffect(() => {
17    async function fetchWeather() {
18      const url = `https://api.open-meteo.com/v1/forecast?latitude=${city.lat}&longitude=${city.lon}&current_weather=true`;
19      const res = await fetch(url);
20      const data = await res.json();

5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>NVIDIA API Client</title>
8    <style>
9        body {
121        }
122        
123        .api-key-group {
124            background: #fff3cd;
125            border: 1px solid #ffeaa7;
129        }
130        
131        .api-key-group label {
132            color: #856404;
133        }
161    <div class="container">
162        <div class="form-panel">
163            <h1>NVIDIA API Client</h1>
164            
165            <form id="apiForm">
166                <div class="api-key-group">
167                    <div class="form-group">
168                        <label for="apiKey">API Key:</label>
169                        <input type="password" id="apiKey" name="apiKey" placeholder="Enter your NVIDIA API key">
170                    </div>
171                </div>
229            <h2>Response</h2>
230            <div id="responseContent" class="response-content">
231                Click "Send Request" to see the API response here.
232            </div>
233        </div>
273                errorHtml += '<strong>🌐 Network Error Troubleshooting:</strong>\\n';
274                errorHtml += '• Check your internet connection\\n';
275                errorHtml += '• Verify the API endpoint is accessible\\n';
276                errorHtml += '• Check if CORS is blocking the request\\n';
277                errorHtml += '• Ensure the server is running and reachable\\n';
331        // Load saved values
332        function loadSavedValues() {
333            // Load API key from cookie
334            const savedApiKey = getCookie('nvidia_api_key');
335            if (savedApiKey) {
336                document.getElementById('apiKey').value = savedApiKey;
337            }
338
362        // Save current form values
363        function saveCurrentValues() {
364            const form = document.getElementById('apiForm');
365            const formData = new FormData(form);
366            const params = {};
367            
368            // Save API key to cookie
369            const apiKey = formData.get('apiKey');
370            if (apiKey) {
371                setCookie('nvidia_api_key', apiKey);
372            }
373
374            // Save other parameters to localStorage
375            for (const [key, value] of formData.entries()) {
376                if (key !== 'apiKey') {
377                    if (key === 'messages') {
378                        try {
397        }
398
399        // Enhanced API request function
400        async function makeApiRequest(requestData, apiKey) {
401            const requestHeaders = {
402                'Authorization': \`Bearer \${apiKey}\`,
403                'Accept': 'application/json',
404                'Content-Type': 'application/json'
406
407            try {
408                const response = await fetch('https://integrate.api.nvidia.com/v1/chat/completions', {
409                    method: 'POST',
410                    headers: requestHeaders,
519
520        // Form submission handler with comprehensive error handling
521        document.getElementById('apiForm').addEventListener('submit', async (e) => {
522            e.preventDefault();
523            
538                // Get form data
539                const formData = new FormData(e.target);
540                const apiKey = formData.get('apiKey');
541                
542                if (!apiKey) {
543                    throw new Error('API Key is required');
544                }
545                
560                saveCurrentValues();
561                
562                // Make API request
563                const response = await makeApiRequest(requestData, apiKey);
564                
565                // Handle response based on streaming

1# NVIDIA API Client
2
3A plain vanilla HTML/JS/CSS web interface for making requests to the NVIDIA API chat completions endpoint.
4
5## Features
6
7- **Form Interface**: Clean, user-friendly form with all NVIDIA API parameters
8- **API Key Storage**: Securely stores API key in browser cookies for convenience
9- **Request Persistence**: Remembers last request parameters using localStorage
10- **Streaming Support**: Handles both streaming and non-streaming responses
11- **Real-time Response Display**: Shows API responses in real-time with proper formatting
12- **Error Handling**: Comprehensive error messages with detailed diagnostic information, troubleshooting guidance, and full request/response context
13
16The interface includes all parameters from the original curl command:
17
18- **API Key**: Your NVIDIA API key (stored in cookies)
19- **Model**: AI model to use (default: `openai/gpt-oss-20b`)
20- **Messages**: JSON array of conversation messages
29## Usage
30
311. Enter your NVIDIA API key (will be saved for future use)
322. Modify any parameters as needed
333. Click "Send Request" to make the API call
344. View the response in the right panel
35
40- Responsive two-column layout
41- Proper error handling and loading states
42- Cookie-based API key persistence
43- localStorage for form state persistence
44
45## API Endpoint
46
47Makes requests to: `https://integrate.api.nvidia.com/v1/chat/completions`
48
49Equivalent to the provided curl command with all the same headers and data structure.

29app.get("/callback", (c) => c.json(c.req));
30
31// Add your API routes here
32// app.get("/api/data", c => c.json({ hello: "world" }));
33
34// Unwrap and rethrow Hono errors as the original error