Val Town Code SearchReturn to Val Town

4
5* `migrations.ts` - code to set up the database tables the app needs
6* `queries.ts` - functions to run queries against those tables, which are imported and used in the main Hono server in `/backend/index.ts`
7
8## Migrations
18The queries file is where running the migrations happen in this app. It'd also be reasonable for that to happen in index.ts, or as is said above, for that line to be commented out, and only run when actual changes are made to your database schema.
19
20The queries file exports functions to get and write data. It relies on shared types and data imported from the `/shared` directory.

3export const tableName = "reactHonoStarter_messages";
4
5export async function createTables() {
6  await sqlite.batch([
7    `CREATE TABLE IF NOT EXISTS ${tableName} (

3import type { Message } from "../shared/types.ts";
4
5export function MessageInput({ onSubmit }: { onSubmit: () => void }) {
6  const [message, setMessage] = React.useState("");
7

2import { sqlite } from "https://esm.town/v/std/sqlite";
3
4export default async function(req: Request): Promise<Response> {
5  const TABLE_NAME = "lab_login_users_with_times";
6

105];
106
107// --- OpenAI Generation Function ---
108async function generateRaceDataWithOpenAI(): Promise<RaceInfo[]> {
109  const openai = new OpenAI();
110  const numToRequest = Math.max(1, NUM_CARDS_TO_GENERATE);
185
186// --- Main HTTP Handler (Val Town Entry Point) ---
187export default async function server(request: Request): Promise<Response> {
188  const activeRaceData = await generateRaceDataWithOpenAI();
189
527// CLIENT-SIDE LOGIC
528// =============================================================================
529(function() {
530  'use strict';
531
600  let cardElements = [];
601
602  function hexToRgb(hex) {
603    let r = 0, g = 0, b = 0;
604    if (hex.length === 4) {
614  }
615
616  function createCards() {
617    carouselTrack.innerHTML = '';
618    cardElements = [];
675  }
676
677  function updateCardPositions(useTransition = true) {
678    const numCards = cardElements.length;
679    if (numCards === 0) return;
716  }
717
718  function createSparks(effectContainer) {
719    if (!effectContainer) return;
720    effectContainer.innerHTML = '<div class="energy-surge"></div>';
732  }
733
734  function moveCarousel(direction) {
735    if (isTransitioning || cardElements.length <= 1) return;
736    const numCards = cardElements.length;
739  }
740
741  function handleDragStart(e) {
742    if (isTransitioning || e.target.closest('p, h3')) return;
743    isDragging = true;
749  }
750
751  function handleDragMove(e) {
752    if (!isDragging) return;
753    currentX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
755  }
756
757  function handleDragEnd() {
758    if (!isDragging) return;
759    isDragging = false;
767  }
768
769  function handlePageMouseMove(e) {
770    if (isDragging || isTransitioning) return;
771    const rect = carouselContainer.getBoundingClientRect();
796  }
797
798  function handlePageMouseLeave() {
799    docElement.style.setProperty(TRACK_ROTATE_X_VAR, '0deg');
800    docElement.style.setProperty(TRACK_ROTATE_Y_VAR, '0deg');
805  }
806
807  function handleCardMouseMove(e) {
808    if (isDragging || isTransitioning) return;
809    const card = e.currentTarget;
828  }
829
830  function handleCardMouseLeave(e) {
831    if (isDragging) return;
832    resetCardHoloState(e.currentTarget);
833  }
834
835  function resetCardHoloState(card) {
836    if (!card) return;
837    card.style.setProperty(HOLO_ROTATE_X_VAR, '0deg');
841  }
842
843  function addEventListeners() {
844    window.addEventListener('keydown', (e) => {
845      if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || document.activeElement?.matches('input, textarea, [contenteditable=true]')) return;
864  }
865
866  function initializeCarousel() {
867    createCards();
868    if (cardElements.length > 0) {

33
34
35async function translateWithOpenAI(text: string) {
36   const openai = new OpenAI();
37  const completion = await openai.chat.completions.create({

33
34
35async function translateToSpanishWithOpenAI(text: string) {
36   const openai = new OpenAI();
37  const completion = await openai.chat.completions.create({

4    "title": "Todo App",
5    "code":
6      "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Task Master</title>\n    <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n</head>\n<body class=\"bg-gray-100\">\n    <div class=\"max-w-md mx-auto mt-12 p-6 rounded-lg shadow-md bg-white\">\n        <div class=\"flex justify-between items-center mb-6\">\n            <h2 class=\"text-2xl font-bold\">Task Master</h2>\n            <span class=\"text-gray-600\">Manage your tasks efficiently</span>\n        </div>\n        <ul class=\"todo-list\" id=\"todo-list\"></ul>\n        <div class=\"add-todo mt-6 flex justify-between items-center\">\n            <input type=\"text\" id=\"todo-input\" placeholder=\"Add new task\" class=\"w-full py-2 pl-10 text-sm text-gray-800 border border-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-600 bg-gray-50\">\n            <button type=\"button\" id=\"add-todo-btn\" class=\"ml-4 px-4 py-2 bg-green-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-green-700 hover:shadow-lg focus:bg-green-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-800 active:shadow-lg transition duration-150 ease-in-out\">Add Task</button>\n        </div>\n        <div class=\"mt-6 text-center text-gray-600\">\n            Built on <a href=\"https://cerebrascoder.com\" target=\"_blank\" class=\"text-gray-900 underline\">Cerebras Coder</a>\n        </div>\n    </div>\n\n    <script>\n        // Get the todo list and add todo button elements\n        const todoList = document.getElementById('todo-list');\n        const addTodoBtn = document.getElementById('add-todo-btn');\n        const todoInput = document.getElementById('todo-input');\n\n        // Load todos from local storage\n        let todos = JSON.parse(localStorage.getItem('todos')) || [];\n\n        // Function to render the todo list\n        function renderTodoList() {\n            todoList.innerHTML = '';\n            todos.forEach((todo, index) => {\n                const todoItem = document.createElement('li');\n                todoItem.innerHTML = `\n                    <div class=\"flex justify-between items-center py-4 border-b border-gray-300\">\n                        <div class=\"flex items-center\">\n                            <input type=\"checkbox\" id=\"todo-${index}\" class=\"mr-4\" ${todo.completed ? 'checked' : ''}>\n                            <span class=\"todo-text ${todo.completed ? 'text-gray-400 line-through' : 'text-gray-600'}\">${todo.text}</span>\n                        </div>\n                        <button type=\"button\" class=\"px-4 py-2 bg-red-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg transition duration-150 ease-in-out delete-todo\" data-index=\"${index}\">Delete</button>\n                    </div>\n                `;\n                todoList.appendChild(todoItem);\n            });\n        }\n\n        // Render the initial todo list\n        renderTodoList();\n\n        // Add event listener to the add todo button\n        addTodoBtn.addEventListener('click', () => {\n            const todoText = todoInput.value.trim();\n            if (todoText) {\n                todos.push({ text: todoText, completed: false });\n                localStorage.setItem('todos', JSON.stringify(todos));\n                todoInput.value = '';\n                renderTodoList();\n            }\n        });\n\n        // Add event listener to the todo list\n        todoList.addEventListener('change', (e) => {\n            if (e.target.type === 'checkbox') {\n                const index = parseInt(e.target.id.split('-')[1]);\n                todos[index].completed = e.target.checked;\n                localStorage.setItem('todos', JSON.stringify(todos));\n                renderTodoList();\n            }\n        });\n\n        // Add event listener to the delete todo buttons\n        todoList.addEventListener('click', (e) => {\n            if (e.target.classList.contains('delete-todo')) {\n                const index = parseInt(e.target.dataset.index);\n                todos.splice(index, 1);\n                localStorage.setItem('todos', JSON.stringify(todos));\n                renderTodoList();\n            }\n        });\n    </script>\n</body>\n</html>",
7    "performance": {
8      "tokensPerSecond": 2298.56,
26    "title": "Markdown Editor",
27    "code":
28      "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Markdown Editor</title>\n    <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n</head>\n<body class=\"bg-white\">\n    <div class=\"max-w-full mx-auto p-4 pt-6 md:p-6 lg:p-8\">\n        <h1 class=\"text-3xl text-center mb-4\">Markdown Editor</h1>\n        <div class=\"flex flex-row\">\n            <div class=\"editor p-4 rounded-lg border border-gray-200 w-full md:w-1/2\">\n                <textarea id=\"editor\" class=\"w-full h-screen p-2 border border-gray-200 rounded-lg\" placeholder=\"Type your Markdown here...\"></textarea>\n            </div>\n            <div class=\"preview p-4 rounded-lg border border-gray-200 w-full md:w-1/2 ml-2 md:ml-4 lg:ml-8\">\n                <div id=\"preview\"></div>\n            </div>\n        </div>\n        <p class=\"text-center mt-4\">Built on <a href=\"https://cerebrascoder.com\">Cerebras Coder</a></p>\n    </div>\n\n    <script>\n        const editor = document.getElementById('editor');\n        const preview = document.getElementById('preview');\n\n        // Initialize textarea with default markdown\n        const defaultMarkdown = `\n# Introduction to Markdown\nMarkdown is a lightweight markup language that is easy to read and write. It is often used for formatting text in plain text editors, chat applications, and even web pages.\n\n## Headers\nHeaders are denoted by the # symbol followed by a space. The number of # symbols determines the level of the header:\n# Heading 1\n## Heading 2\n### Heading 3\n\n## Emphasis\nYou can use emphasis to make your text **bold** or *italic*:\n*Italics*\n**Bold**\n\n## Lists\nYou can use lists to organize your text:\n* Item 1\n* Item 2\n* Item 3\nOr\n1. Item 1\n2. Item 2\n3. Item 3\n\n## Links\nYou can use links to reference external resources:\n[Google](https://www.google.com)\n\n## Images\nYou can use images to add visual content:\n![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/208px-Markdown-mark.svg.png)\n`;\n        editor.value = defaultMarkdown;\n\n        // Update preview on input\n        editor.addEventListener('input', () => {\n            const markdown = editor.value;\n            const html = markdownToHtml(markdown);\n            preview.innerHTML = html;\n        });\n\n        // Initialize preview with default markdown\n        const defaultHtml = markdownToHtml(defaultMarkdown);\n        preview.innerHTML = defaultHtml;\n\n        // Function to convert Markdown to HTML\n        function markdownToHtml(markdown) {\n            // Bold\n            markdown = markdown.replace(/\\*\\*(.*?)\\*\\*/g, '<b>$1</b>');\n\n            // Italic\n            markdown = markdown.replace(/\\*(.*?)\\*/g, '<i>$1</i>');\n\n            // Links\n            markdown = markdown.replace(/\\[(.*?)\\]\\((.*?)\\)/g, '<a href=\"$2\">$1</a>');\n\n            // Images\n            markdown = markdown.replace(/!\\[(.*?)\\]\\((.*?)\\)/g, '<img src=\"$2\" alt=\"$1\">');\n\n            // Headings\n            markdown = markdown.replace(/(^#{1,6} )(.*)/gm, (match, level, text) => {\n                return `<h${level.length}>${text}</h${level.length}>`;\n            });\n\n            // Lists\n            markdown = markdown.replace(/^(\\*|\\d+\\.) (.*)/gm, (match, marker, text) => {\n                if (marker.startsWith('*')) {\n                    return `<li>${text}</li>`;\n                } else {\n                    return `<li>${text}</li>`;\n                }\n            });\n\n            // Line breaks\n            markdown = markdown.replace(/\\n/g, '<br>');\n\n            // Fix for nested lists\n            markdown = markdown.replace(/<li><li>/g, '<li>');\n            markdown = markdown.replace(/<\\/li><\\/li>/g, '</li>');\n\n            // Wrap lists in ul\n            markdown = markdown.replace(/(<li>.*<\\/li>)/g, '<ul>$1</ul>');\n\n            return markdown;\n        }\n    </script>\n</body>\n</html>",
29    "performance": {
30      "tokensPerSecond": 4092.96,

2import { ITERATIONS_TABLE, KEY, PROJECTS_TABLE, SCHEMA_VERSION } from "./migrations.ts";
3
4export async function createProject(prompt: string) {
5  const projectResult = await sqlite.execute(
6    `INSERT INTO ${PROJECTS_TABLE} (initial_prompt) VALUES (?)`,
11}
12
13export async function getNextVersionNumber(projectId: number) {
14  const data = await sqlite.execute(
15    `SELECT version_number FROM ${ITERATIONS_TABLE}
21}
22
23export async function insertVersion(projectId: number, versionNumber: number, prompt: string, code: string) {
24  await sqlite.execute(
25    `INSERT INTO ${ITERATIONS_TABLE} 
29}
30
31export async function getCodeInner(table: string, project: string, version?: string) {
32  let data;
33  if (version === undefined) {
50}
51
52export async function getCode(project: string, version?: string) {
53  // try to get code in the new table partition first
54  const code = await getCodeInner(ITERATIONS_TABLE, project, version);

7export const ITERATIONS_TABLE = "cerebras_coder_iterations";
8
9export async function createTables() {
10  await sqlite.execute(`
11    CREATE TABLE IF NOT EXISTS ${PROJECTS_TABLE} (