Val Town Code SearchReturn to Val Town

15## Project Structure
16
17- `/backend` - Hono API server with SQLite database
18- `/frontend` - HTML/JS frontend with Tailwind CSS
19- `/shared` - Shared types and utilities

9- Interactive practice with feedback
10- Mobile-friendly design with dark mode support
11- No external dependencies or API keys required
12
13## How to Use
22
23- Built as a single HTTP-triggered Val
24- Uses browser's built-in SpeechSynthesis API for text-to-speech
25- Styled with TailwindCSS
26- Includes dark mode support based on system preferences

39## Project Structure
40
41- **Backend**: `/backend/index.ts` - Handles API requests and serves frontend assets
42  - OpenAI integration for chat completions
43  - API endpoints for authentication, chat, and user data
44  - Supabase integration for database and authentication
45
68- **Database**: Supabase
69- **Authentication**: Supabase Auth
70- **AI**: OpenAI API
71- **Styling**: Custom CSS with Tailwind utility classes
72

93    
94    try {
95      // Send message to API
96      const response = await fetch('/api/chat', {
97        method: 'POST',
98        headers: {
134          
135          // Save user message
136          await fetch(`/api/conversations/${conversation.id}/messages`, {
137            method: 'POST',
138            headers: {
147          
148          // Save assistant message
149          await fetch(`/api/conversations/${conversation.id}/messages`, {
150            method: 'POST',
151            headers: {
226          const token = sessionData.access_token;
227          
228          await fetch(`/api/messages/${message.id}/favorite`, {
229            method: 'PUT',
230            headers: {
248    
249    if (!success) {
250      // Fallback if Web Share API is not supported
251      navigator.clipboard.writeText(message.content)
252        .then(() => alert('Copied to clipboard!'))

38      const token = sessionData.access_token;
39      
40      const response = await fetch('/api/conversations', {
41        method: 'POST',
42        headers: {

31      try {
32        // Fetch agents
33        const agentsResponse = await fetch('/api/agents');
34        const agentsData = await agentsResponse.json();
35        setAgents(agentsData.agents);
40        
41        // Fetch suggestions
42        const suggestionsResponse = await fetch('/api/suggestions');
43        const suggestionsData = await suggestionsResponse.json();
44        setSuggestions(suggestionsData.suggestions);
45        
46        // Fetch categories
47        const categoriesResponse = await fetch('/api/categories');
48        const categoriesData = await categoriesResponse.json();
49        setCategories(categoriesData.categories);
50        
51        // Fetch quick actions
52        const quickActionsResponse = await fetch('/api/quick-actions');
53        const quickActionsData = await quickActionsResponse.json();
54        setQuickActions(quickActionsData.quickActions);
61            const token = sessionData.access_token;
62            
63            const conversationsResponse = await fetch('/api/conversations', {
64              headers: {
65                'Authorization': `Bearer ${token}`
77                
78                // Fetch messages for the conversation
79                const messagesResponse = await fetch(`/api/conversations/${latestConversation.id}/messages`, {
80                  headers: {
81                    'Authorization': `Bearer ${token}`

52
53        // Fetch user profile
54        const response = await fetch('/api/profile', {
55          headers: {
56            'Authorization': `Bearer ${token}`
82
83    try {
84      const response = await fetch('/api/auth/signin', {
85        method: 'POST',
86        headers: {
100
101      // Fetch user profile
102      const profileResponse = await fetch('/api/profile', {
103        headers: {
104          'Authorization': `Bearer ${data.session.access_token}`
124
125    try {
126      const response = await fetch('/api/auth/signup', {
127        method: 'POST',
128        headers: {
164
165    try {
166      await fetch('/api/auth/signout', {
167        method: 'POST'
168      });
189      const token = sessionData.access_token;
190
191      const response = await fetch('/api/settings', {
192        method: 'PUT',
193        headers: {

117app.get("/shared/**/*", c => serveFile(c.req.path, import.meta.url));
118
119// API Routes
120
121// Get AI agents
122app.get("/api/agents", async (c) => {
123  try {
124    // Try to get agents from database
138
139// Get suggestion chips
140app.get("/api/suggestions", async (c) => {
141  try {
142    const category = c.req.query("category");
167
168// Get categories
169app.get("/api/categories", async (c) => {
170  try {
171    // Try to get categories from database
185
186// Get quick actions
187app.get("/api/quick-actions", async (c) => {
188  try {
189    // Try to get quick actions from database
202});
203
204// Chat API endpoint - no auth required for demo
205app.post("/api/chat", async (c) => {
206  try {
207    const { message, agentId = "default", conversationId, messageHistory = [] } = await c.req.json();
281    });
282  } catch (error) {
283    console.error("Error in chat API:", error);
284    return c.json({ error: "Failed to process your request" }, 500);
285  }
287
288// Auth routes
289app.post("/api/auth/signup", async (c) => {
290  try {
291    const { email, password, username } = await c.req.json();
343    });
344  } catch (error) {
345    console.error("Error in signup API:", error);
346    return c.json({ error: "Failed to process your request" }, 500);
347  }
348});
349
350app.post("/api/auth/signin", async (c) => {
351  try {
352    const { email, password } = await c.req.json();
371    });
372  } catch (error) {
373    console.error("Error in signin API:", error);
374    return c.json({ error: "Failed to process your request" }, 500);
375  }
376});
377
378app.post("/api/auth/signout", async (c) => {
379  try {
380    const { error } = await supabase.auth.signOut();
386    return c.json({ success: true });
387  } catch (error) {
388    console.error("Error in signout API:", error);
389    return c.json({ error: "Failed to process your request" }, 500);
390  }
393// Protected routes (require authentication)
394// Get user profile
395app.get("/api/profile", authMiddleware, async (c) => {
396  try {
397    const user = c.get("user");
428    });
429  } catch (error) {
430    console.error("Error in profile API:", error);
431    return c.json({ error: "Failed to process your request" }, 500);
432  }
434
435// Update user settings
436app.put("/api/settings", authMiddleware, async (c) => {
437  try {
438    const user = c.get("user");
454    return c.json({ success: true });
455  } catch (error) {
456    console.error("Error in update settings API:", error);
457    return c.json({ error: "Failed to process your request" }, 500);
458  }
460
461// Get user conversations
462app.get("/api/conversations", authMiddleware, async (c) => {
463  try {
464    const user = c.get("user");
477    return c.json({ conversations: conversations || [] });
478  } catch (error) {
479    console.error("Error in conversations API:", error);
480    return c.json({ error: "Failed to process your request" }, 500);
481  }
483
484// Create a new conversation
485app.post("/api/conversations", authMiddleware, async (c) => {
486  try {
487    const user = c.get("user");
507    return c.json({ conversation: data[0] });
508  } catch (error) {
509    console.error("Error in create conversation API:", error);
510    return c.json({ error: "Failed to process your request" }, 500);
511  }
513
514// Get messages for a conversation
515app.get("/api/conversations/:id/messages", authMiddleware, async (c) => {
516  try {
517    const user = c.get("user");
543    return c.json({ messages: messages || [] });
544  } catch (error) {
545    console.error("Error in get messages API:", error);
546    return c.json({ error: "Failed to process your request" }, 500);
547  }
549
550// Add a message to a conversation
551app.post("/api/conversations/:id/messages", authMiddleware, async (c) => {
552  try {
553    const user = c.get("user");
595    return c.json({ message: data[0] });
596  } catch (error) {
597    console.error("Error in add message API:", error);
598    return c.json({ error: "Failed to process your request" }, 500);
599  }
601
602// Toggle favorite status of a message
603app.put("/api/messages/:id/favorite", authMiddleware, async (c) => {
604  try {
605    const user = c.get("user");
637    return c.json({ message: data[0] });
638  } catch (error) {
639    console.error("Error in favorite message API:", error);
640    return c.json({ error: "Failed to process your request" }, 500);
641  }

82}
83
84// Share text if Web Share API is supported
85export async function shareText(text: string, title: string = 'Shared from Pi'): Promise<boolean> {
86  if (!navigator.share) return false;

1# Background Remover
2
3This Val Town project provides an API and web interface for removing backgrounds from images using the [Remove.bg](https://www.remove.bg/) API.
4
5## Features
9- Preview of original and processed images
10- Download option for processed images
11- API endpoint for programmatic use
12
13## Setup
15To use this service, you need to:
16
171. Create an account at [Remove.bg](https://www.remove.bg/) and get an API key
182. Add your API key as an environment variable in Val Town:
19   - Variable name: `REMOVE_BG_API_KEY`
20   - Value: Your Remove.bg API key
21
22## Usage
30- Download the processed image with a transparent background
31
32### API Usage
33
34You can also use this as an API endpoint:
35
36```javascript
37// Example: Using fetch to call the API
38async function removeBackground(imageFile) {
39  const formData = new FormData();