Val Town Code SearchReturn to Val Town

1import { getI18n, getDateRangeText as i18nDateRangeText } from './i18n.js';
2import { getDisplaySourceName, getActualSearchSource, getActualSearchSourceName } from './chatterLib.js';
3import { checkServerKey as apiCheckServerKey, summarizePaper as apiSummarizePaper, postChatStreamSSE, postChatStream, postGroqChat } from './apiClient.js';
4import {
5  initDb,
110    summaryStates: {},
111    hasServerKey: true,
112    userApiKey: '',
113    apiKeyInput: '',
114    // Model selection
115    selectedModel: 'openai/gpt-oss-120b',
279      try { this.jobManager = new JobManager(); } catch (_) { /* ignore */ }
280      
281      // Load API key from localStorage
282      const storedApiKey = localStorage.getItem('groq_api_key');
283      if (storedApiKey) {
284        this.userApiKey = storedApiKey;
285      }
286      // Load preferred model
323      try { this.applyThemePreference(); } catch (_) { /* ignore */ }
324      
325      // Check if server has API key
326      await this.checkServerKey();
327      
812    async checkServerKey() {
813      try {
814        const data = await apiCheckServerKey();
815        this.hasServerKey = !!data.hasServerKey;
816      } catch (error) {
820    },
821
822    setApiKey() {
823      if (this.apiKeyInput.trim()) {
824        this.userApiKey = this.apiKeyInput.trim();
825        localStorage.setItem('groq_api_key', this.userApiKey);
826        this.apiKeyInput = '';
827      }
828    },
829
830    changeApiKey() {
831      this.userApiKey = '';
832    },
833
834    clearApiKey() {
835      this.userApiKey = '';
836      localStorage.removeItem('groq_api_key');
837    },
838
1128    async onImportFileChange(e) { return dataIO.onImportFileChange(this, e); },
1129
1130    get maskedApiKey() {
1131      if (!this.userApiKey) return '';
1132      const key = String(this.userApiKey || '').trim();
1133      if (key.length <= 8) {
1134        // Very short keys: show minimal hint
1243
1244      try {
1245        const data = await apiSummarizePaper({ url, title, language: this.selectedLanguage, userApiKey: this.userApiKey });
1246        
1247        if (data.error) {
1429            return sp ? [{ role: 'system', content: sp }, ...chatMessages] : chatMessages;
1430          })(),
1431          userApiKey: this.userApiKey,
1432          model: this.selectedModel,
1433          reasoning_effort: this.reasoningEffort,
1547      const text = (this.chatInput || '').trim(); if (!text) return;
1548      this.errorMessage = '';
1549      if (!this.hasServerKey && !this.userApiKey) { this.errorMessage = 'please add api key'; return; }
1550      if (!this.currentChatId) { try { await coreEnsureChatExistsForEdits(this, { force: true }); } catch (_) {} }
1551      const createdAt = Date.now();
1574          return sp ? [{ role: 'system', content: sp }, ...chatMessages] : chatMessages;
1575        })(),
1576        userApiKey: this.userApiKey,
1577        model: this.selectedModel,
1578        reasoning_effort: this.reasoningEffort,

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.