Val Town Code SearchReturn to Val Town

13import { Contact, Interaction } from "../../shared/types.ts";
14
15const api = new Hono();
16
17// Contacts endpoints
18api.get("/contacts", async (c) => {
19  try {
20    const searchQuery = c.req.query("q");
30});
31
32api.get("/contacts/:id", async (c) => {
33  try {
34    const id = parseInt(c.req.param("id"));
46});
47
48api.post("/contacts", async (c) => {
49  try {
50    const contact = await c.req.json() as Contact;
62});
63
64api.put("/contacts/:id", async (c) => {
65  try {
66    const id = parseInt(c.req.param("id"));
84});
85
86api.delete("/contacts/:id", async (c) => {
87  try {
88    const id = parseInt(c.req.param("id"));
101
102// Interactions endpoints
103api.get("/contacts/:id/interactions", async (c) => {
104  try {
105    const contactId = parseInt(c.req.param("id"));
113});
114
115api.post("/interactions", async (c) => {
116  try {
117    const interaction = await c.req.json() as Interaction;
132});
133
134api.delete("/interactions/:id", async (c) => {
135  try {
136    const id = parseInt(c.req.param("id"));
148});
149
150export default api;

23}
24
25export interface ApiResponse<T> {
26  success: boolean;
27  data?: T;

18│   │   └── queries.ts       # DB query functions
19│   ├── routes/              # Route modules
20│   │   └── api.ts           # API endpoints
21│   └── index.ts             # Main entry point
22├── frontend/

318            <div class="md:col-span-3">
319              <div class="flex items-center justify-between">
320                <label for="apiKey" class="block text-sm font-medium text-gray-700 dark:text-gray-300">OpenAI API Key (Optional)</label>
321                <span class="text-xs text-gray-500 dark:text-gray-400">Direct API connection</span>
322              </div>
323              <div class="mt-1 flex rounded-md shadow-sm">
324                <input
325                  type="password"
326                  name="apiKey"
327                  id="apiKey"
328                  class="flex-1 min-w-0 block w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
329                  placeholder="sk-..."
331                <button
332                  type="button"
333                  id="useApiKeyBtn"
334                  class="ml-3 inline-flex items-center px-3 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
335                >
337                </button>
338              </div>
339              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Your API key is never stored on our servers</p>
340            </div>
341            

14      const patchContent = await patchResponse.text();
15
16      // Call AI service with your private API key
17      // Replace with your actual AI service URL
18      const aiResponse = await fetch("https://api.openai.com/v1/chat/completions", {
19        method: "POST",
20        headers: {
21          "Content-Type": "application/json",
22          "Authorization": `Bearer ${Deno.env.get("AI_API_KEY")}`,
23        },
24        body: JSON.stringify({

10- Combines processed outputs seamlessly
11- Simple, responsive UI with token counting and progress tracking
12- **Direct OpenAI API Connection** - Use your own API key for direct processing
13- **Debug Console** - View API requests, responses, and token usage
14- **Script Type Detection** - Automatically identifies screenplay, technical, marketing, academic, or creative content
15- **Syntax Highlighting** - Automatically highlights code in technical scripts
29- `/index.ts` - Main HTTP endpoint and route handler
30- `/backend/processor.ts` - Text processing logic and OpenAI integration
31- `/backend/openaiProxy.ts` - Server-side proxy for OpenAI API calls
32- `/backend/scriptTypeDetector.ts` - Automatic script type detection
33- `/shared/tokenizer.ts` - Advanced token counting and text chunking
34- `/shared/OpenAIConnector.ts` - Direct OpenAI API connection handling
35- `/frontend/index.html` - Main HTML template
36- `/frontend/index.ts` - Frontend JavaScript logic
512. Select script type or use auto-detection
523. Choose an instruction template or write custom instructions
534. (Optional) Set your OpenAI API key for direct processing
545. Click "Improve Script" to process
556. View, compare, and download the improved script
57## Advanced Features
58
59### Direct API Connection
60You can use your own OpenAI API key for direct processing, bypassing the server proxy. This can be useful for:
61- Processing very large scripts
62- Using custom model parameters
65### Debug Console
66The debug console provides real-time information about:
67- API requests and responses
68- Token usage statistics
69- Processing errors and warnings

321        // Otherwise wait and retry
322        const delay = Math.pow(2, attempt) * 1000;
323        console.log(`API error, retrying in ${delay}ms...`);
324        await new Promise(resolve => setTimeout(resolve, delay));
325      }

26});
27
28// API endpoint to get source URL
29app.get("/api/source-url", c => {
30  const projectInfo = parseProject(import.meta.url);
31  const sourceUrl = projectInfo.links.self.project.replace("esm.sh", "val.town");
33});
34
35// API endpoint to get session status
36app.get("/api/sessions/:sessionId", async c => {
37  try {
38    const sessionId = c.req.param("sessionId");
62});
63
64// API endpoint to get session content
65app.get("/api/sessions/:sessionId/content", async c => {
66  try {
67    const sessionId = c.req.param("sessionId");
88});
89
90// API endpoint to list recent sessions
91app.get("/api/sessions", async c => {
92  try {
93    const keys = await blob.list("sessions/");
118});
119
120// API endpoint to detect script type
121app.post("/api/detect-type", async c => {
122  try {
123    const body = await c.req.json();
138});
139
140// API endpoint for OpenAI proxy
141app.post("/api/openai/chat", async c => {
142  try {
143    const body = await c.req.json();
144    
145    const { proxyChatCompletion, logApiUsage } = await import("./backend/openaiProxy.ts");
146    const result = await proxyChatCompletion(body);
147    
148    // Log API usage
149    if (result.usage) {
150      logApiUsage(
151        body.model || "gpt-4o",
152        result.usage.prompt_tokens,
164});
165
166// API endpoint to process text
167app.post("/api/process", async c => {
168  try {
169    const formData = await c.req.formData();

1/**
2 * OpenAI API Proxy
3 * 
4 * Proxies requests to OpenAI API to avoid exposing API keys to the client
5 */
6import { OpenAI } from "https://esm.town/v/std/openai";
34    return completion;
35  } catch (error) {
36    console.error("OpenAI API error:", error);
37    throw error;
38  }
40
41/**
42 * Log API usage for monitoring
43 */
44export function logApiUsage(model: string, promptTokens: number, completionTokens: number): void {
45  const timestamp = new Date().toISOString();
46  console.log(`[${timestamp}] API Usage: ${model} - Prompt: ${promptTokens}, Completion: ${completionTokens}, Total: ${promptTokens + completionTokens}`);
47}

4 * A collapsible terminal-like console for debugging
5 */
6import { ApiEvents } from "../../shared/OpenAIConnector.ts";
7
8export class DebugConsole {
74  
75  /**
76   * Set up event listeners for API events
77   */
78  private setupEventListeners(): void {
79    window.addEventListener(`openai:${ApiEvents.REQUEST_STARTED}`, (e: any) => {
80      const detail = e.detail;
81      this.log('request', `Request started: ${detail.model}`, {
85    });
86    
87    window.addEventListener(`openai:${ApiEvents.REQUEST_COMPLETED}`, (e: any) => {
88      const detail = e.detail;
89      this.log('success', `Request completed: ${detail.requestId}`, {
92    });
93    
94    window.addEventListener(`openai:${ApiEvents.REQUEST_ERROR}`, (e: any) => {
95      const detail = e.detail;
96      this.log('error', `Error: ${detail.error}`, {
99    });
100    
101    window.addEventListener(`openai:${ApiEvents.TOKEN_USAGE}`, (e: any) => {
102      const detail = e.detail;
103      this.log('info', `Token usage: ${detail.totalTokens} total (${detail.promptTokens} prompt, ${detail.completionTokens} completion)`, {
106    });
107    
108    window.addEventListener(`openai:${ApiEvents.LOG}`, (e: any) => {
109      const detail = e.detail;
110      this.log('log', detail.message);