[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_159":160,"_161":162},"routes/_app.x.$handle.$name",{"_95":94,"_31":43,"_103":82,"_26":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":117,"_118":24,"_119":120,"_121":47,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":47,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":30,"_55":47,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":76,"_77":78,"_79":80,"_81":24},"version",1,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":33,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","6f4323fe-27a8-11f0-9edc-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction ImportDeck() {\n const [deckText, setDeckText] = useState(\"\");\n const [message, setMessage] = useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n\n try {\n const response = await fetch(\"/submit\", {\n method: \"POST\",\n body: JSON.stringify({ deckText }),\n headers: {\n \"Content-Type\": \"application/json\",\n },\n });\n\n const result = await response.text();\n setMessage(result);\n setDeckText(\"\");\n } catch (error) {\n setMessage(\"Error submitting deck\");\n }\n };\n\n return (\n

🃏 Anki Deck Importer

\n );\n}\n\nfunction ViewDeck() {\n const [cards, setCards] = useState([]);\n const [error, setError] = useState(\"\");\n const [editingCard, setEditingCard] = useState<{ id: number; field: string } | null>(null);\n const [sortColumn, setSortColumn] = useState(\"last_random_time\");\n const [sortDirection, setSortDirection] = useState<\"asc\" | \"desc\">(\"desc\");\n\n useEffect(() => {\n fetchCards();\n }, []);\n\n async function fetchCards() {\n try {\n const response = await fetch(\"/view\");\n if (!response.ok) {\n throw new Error(\"Failed to fetch cards\");\n }\n const data = await response.json();\n setCards(data);\n } catch (err) {\n setError(err.message);\n }\n }\n\n const handleSort = (column: string) => {\n // If clicking the same column, toggle direction\n if (sortColumn === column) {\n setSortDirection(sortDirection === \"asc\" ? \"desc\" : \"asc\");\n } else {\n // If new column, start with descending for last_random_time, ascending for others\n setSortColumn(column);\n setSortDirection(column === \"last_random_time\" ? \"desc\" : \"asc\");\n }\n\n // Perform client-side sorting\n const sortedCards = [...cards].sort((a, b) => {\n if (a[column] == null || b[column] == null) return 0;\n\n // Handle numeric columns\n if ([\"id\", \"random_count\"].includes(column)) {\n return sortDirection === \"asc\"\n ? a[column] - b[column]\n : b[column] - a[column];\n }\n\n // Handle string columns (case-insensitive)\n if (typeof a[column] === \"string\") {\n return sortDirection === \"asc\"\n ? a[column].localeCompare(b[column])\n : b[column].localeCompare(a[column]);\n }\n\n // Handle date columns\n if ([\"created_at\", \"last_random_time\"].includes(column)) {\n return sortDirection === \"asc\"\n ? new Date(a[column]).getTime() - new Date(b[column]).getTime()\n : new Date(b[column]).getTime() - new Date(a[column]).getTime();\n }\n\n return 0;\n });\n\n setCards(sortedCards);\n };\n\n const renderSortIcon = (column: string) => {\n if (sortColumn !== column) return null;\n return sortDirection === \"asc\" ? \"▲\" : \"▼\";\n };\n\n const handleEditStart = (id: number, field: string) => {\n setEditingCard({ id, field });\n };\n\n const handleEditSave = async (id: number, field: string, newValue: string) => {\n try {\n const response = await fetch(\"/update\", {\n method: \"POST\",\n body: JSON.stringify({ id, field, value: newValue }),\n headers: {\n \"Content-Type\": \"application/json\",\n },\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to update card\");\n }\n\n // Update local state\n setCards(prevCards => prevCards.map(card => card.id === id ? { ...card, [field]: newValue } : card));\n\n setEditingCard(null);\n } catch (err) {\n setError(err.message);\n }\n };\n\n const renderEditableCell = (card: any, field: string) => {\n const isEditing = editingCard?.id === card.id && editingCard?.field === field;\n\n if (isEditing) {\n return (\n \n handleEditSave(card.id, field, e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") {\n handleEditSave(card.id, field, (e.target as HTMLInputElement).value);\n }\n }}\n autoFocus\n style={{ width: \"100%\", border: \"1px solid #007bff\" }}\n />\n \n );\n }\n\n return (\n \n {card[field]}\n handleEditStart(card.id, field)}\n style={{\n position: \"absolute\",\n right: \"0\",\n top: \"0\",\n backgroundColor: \"transparent\",\n border: \"none\",\n color: \"#007bff\",\n cursor: \"pointer\",\n }}\n >\n ✏️\n \n \n );\n };\n\n return (\n

📚 Anki Deck Cards

\n {error &&

{error}

}\n \n \n \n handleSort(\"id\")}\n >\n ID {renderSortIcon(\"id\")}\n \n handleSort(\"clue\")}\n >\n Clue {renderSortIcon(\"clue\")}\n \n handleSort(\"answer\")}\n >\n Answer {renderSortIcon(\"answer\")}\n \n handleSort(\"created_at\")}\n >\n Created At {renderSortIcon(\"created_at\")}\n \n handleSort(\"random_count\")}\n >\n Times appeared {renderSortIcon(\"random_count\")}\n \n handleSort(\"last_random_time\")}\n >\n Last appeared {renderSortIcon(\"last_random_time\")}\n \n \n \n \n {cards.map((card: any) => (\n \n \n {renderEditableCell(card, \"clue\")}\n {renderEditableCell(card, \"answer\")}\n \n \n \n \n ))}\n \n

{card.id}	{card.created_at}	{card.random_count}	{card.last_random_time}

\n );\n}\n\n// Rest of the code remains unchanged from the previous implementation\nfunction RandomCard() {\n const [randomCard, setRandomCard] = useState<\n {\n katakanaWord: string;\n englishWord: string;\n exampleSentence: string;\n } | null\n >(null);\n const [error, setError] = useState(\"\");\n\n const fetchRandomCard = async () => {\n try {\n const response = await fetch(\"/random\");\n if (!response.ok) {\n throw new Error(\"Failed to fetch random card\");\n }\n const data = await response.json();\n setRandomCard(data);\n } catch (err) {\n setError(err.message);\n }\n };\n\n return (\n

🎲 Random Card

\n \n Get Random Card\n \n\n {error &&

{error}

}\n\n {randomCard && (\n \n

\n Katakana Word: {randomCard.katakanaWord}\n

\n English Word: {randomCard.englishWord}\n

\n Example Sentence: {randomCard.exampleSentence}\n

\n )}\n \n );\n}\n\nfunction App() {\n const [view, setView] = useState<\"import\" | \"view\" | \"random\">(\"import\");\n\n return (\n

\n \n setView(\"import\")}\n style={{\n backgroundColor: view === \"import\" ? \"#007bff\" : \"#6c757d\",\n color: \"white\",\n border: \"none\",\n padding: \"10px 20px\",\n }}\n >\n Import Deck\n \n setView(\"view\")}\n style={{\n backgroundColor: view === \"view\" ? \"#007bff\" : \"#6c757d\",\n color: \"white\",\n border: \"none\",\n padding: \"10px 20px\",\n }}\n >\n View Deck\n \n setView(\"random\")}\n style={{\n backgroundColor: view === \"random\" ? \"#007bff\" : \"#6c757d\",\n color: \"white\",\n border: \"none\",\n padding: \"10px 20px\",\n }}\n >\n Random Card\n \n

\n\n {view === \"import\" && }\n {view === \"view\" && }\n {view === \"random\" && }\n\n \n View Source\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const KEY = \"highApricotImpala\";\n const SCHEMA_VERSION = 2;\n\n // last two rows are backfilled from ${KEY}_anki_cards_1\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_anki_cards_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n clue TEXT NOT NULL,\n answer TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n \n random_count INTEGER DEFAULT 0,\n last_random_time DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const url = new URL(request.url);\n\n if (request.method === \"POST\" && url.pathname === \"/submit\") {\n try {\n const { deckText } = await request.json();\n const cards = deckText.split(\"\\n\")\n .filter(line => line.trim() !== \"\")\n .map(line => line.split(\"\\t\"));\n\n for (const [clue, answer] of cards) {\n if (clue && answer) {\n await sqlite.execute(\n `\n INSERT INTO ${KEY}_anki_cards_${SCHEMA_VERSION} (clue, answer) \n VALUES (?, ?)\n `,\n [clue, answer],\n );\n }\n }\n\n return new Response(`Successfully imported ${cards.length} cards!`, { status: 200 });\n } catch (error) {\n return new Response(`Error: ${error.message}`, { status: 500 });\n }\n }\n\n if (request.method === \"GET\" && url.pathname === \"/view\") {\n try {\n const result = await sqlite.execute(`\n SELECT * FROM ${KEY}_anki_cards_${SCHEMA_VERSION} \n ORDER BY last_random_time DESC\n `);\n\n return new Response(JSON.stringify(result.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n return new Response(`Error: ${error.message}`, { status: 500 });\n }\n }\n\n if (request.method === \"POST\" && url.pathname === \"/update\") {\n try {\n const { id, field, value } = await request.json();\n\n // Validate input\n if (![\"clue\", \"answer\"].includes(field)) {\n return new Response(\"Invalid field\", { status: 400 });\n }\n\n await sqlite.execute(\n `\n UPDATE ${KEY}_anki_cards_${SCHEMA_VERSION} \n SET ${field} = ? \n WHERE id = ?\n `,\n [value, id],\n );\n\n return new Response(\"Card updated successfully\", { status: 200 });\n } catch (error) {\n return new Response(`Error: ${error.message}`, { status: 500 });\n }\n }\n\n if (request.method === \"GET\" && (url.pathname === \"/random\" || url.pathname === \"/random.json\")) {\n try {\n const result = await sqlite.execute(`\n SELECT * FROM ${KEY}_anki_cards_${SCHEMA_VERSION} \n ORDER BY RANDOM() \n LIMIT 1\n `);\n\n if (result.rows.length === 0) {\n return new Response(\"No cards found\", { status: 404 });\n }\n\n const card = result.rows[0];\n\n // Update random_count and last_random_time\n await sqlite.execute(\n `\n UPDATE ${KEY}_anki_cards_${SCHEMA_VERSION} \n SET random_count = ?, last_random_time = ?\n WHERE id = ?\n `,\n [\n parseInt(card.random_count ?? 0) + 1,\n new Date().toISOString().slice(0, 19).replace(\"T\", \" \"),\n card.id,\n ],\n );\n\n const openai = new OpenAI();\n\n const completion = await openai.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content:\n \"You are a helpful assistant that converts Japanese words to the specified format. Always respond in valid JSON.\",\n },\n {\n role: \"user\",\n content: `Convert this Japanese word to the following format:\n- Remove any parenthetical explanations or HTML\n- Create a katakana version of the word\n- Create an English example sentence with the katakana version of the word in place of the original word\n\nKatakana: ${card.clue}\nEnglish word: ${card.answer}\nJSON Format:\n{\n \"katakanaWord\": \"...\",\n \"englishWord\": \"...\",\n \"exampleSentence\": \"...\"\n}`,\n },\n ],\n model: \"gpt-4o-mini\",\n response_format: { type: \"json_object\" },\n });\n\n const parsedResponse = JSON.parse(completion.choices[0].message.content);\n\n return new Response(JSON.stringify(parsedResponse), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n return new Response(`Error: ${error.message}`, { status: 500 });\n }\n }\n\n return new Response(\n `\n \n \n Anki Deck Importer\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}","createdAt",["D",1736522207647],"branchVersion","branchId","6f3f3b86-27a8-11f0-9edc-569c3dd06744","id","6f3ef1a8-27a8-11f0-9edc-569c3dd06744","highApricotImpala",["D",1746226482285],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","d402a971-ec8f-4d0e-89f0-ffd768759076","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","2e4d6945-83a3-4492-bb59-6be6cab8dce3","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},"branch",{"_13":14,"_31":82,"_41":40,"_83":42,"_84":85,"_86":59,"_87":88,"_89":90,"_91":61,"_92":43,"_93":94},"isOwned","main","projectId","forkedBranchId","48c614ac-27a8-11f0-9edc-569c3dd06744","forkedBranchVersion","forkedProjectPrivacy","unlisted","forkedProjectId","48c5c5ec-27a8-11f0-9edc-569c3dd06744","forkedProjectOrgId","projectName","userHandle","jdan","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJsV0d2bDdqQTdBMGNpY2REV082Q0daSDRlcCJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_41":42,"_31":43,"_36":155,"_45":-5,"_46":47,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":30,"_55":47,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":156,"_77":157,"_79":158,"_81":24},"tree",[150],"files",[150],"counts",{"_140":59,"_141":14,"_142":59,"_143":144,"_145":146},"contents",[133],"upstreamProject","upstreamBranch",{"_41":85,"_36":126,"_127":128,"_31":82,"_83":90,"_13":129,"_84":-5,"_86":-5,"_130":131,"_45":-5,"_81":24,"_48":88,"_93":94,"_60":61,"_92":132},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746226417737],"updatedAt",["D",1734983052913],33,"lockfileKey","1755566790378-esm.town_v_jdan_ankiDeckImporterFrontend@33-main","ankiDeckImporterFrontend",{"_41":134,"_31":27,"_29":30,"_135":-5,"_39":40,"_38":14,"_136":47,"_36":137,"_13":59,"_32":33,"_34":35,"_23":24,"_138":-5,"_26":139},"6f432322-27a8-11f0-9edc-569c3dd06744","parentId","latest",["D",1736522207647],"label",[27],"pulls","branches","forks","envVars",{"_147":59,"_149":59},"connections",{"_147":59,"_148":59},"count","unfilledCount","emptyCount",{"_41":134,"_31":27,"_29":30,"_135":-5,"_39":40,"_38":14,"_136":47,"_36":151,"_13":59,"_32":33,"_34":35,"_23":24,"_138":-5,"_152":153,"_26":154},["D",1736522207647],"children",[],[27],["D",1746226482285],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},{"_13":14,"_31":82,"_41":40,"_83":42,"_84":85,"_86":59,"_87":88,"_89":90,"_91":61,"_92":43,"_93":94},"ctx",{"_75":-5,"_123":192,"_193":194,"_195":196,"_197":24,"_198":24,"_199":24,"_200":47,"_201":-5,"_202":-7,"_203":-7,"_204":59,"_205":24,"_206":24,"_207":-5,"_208":24,"_209":24,"_210":24,"_211":-5},"ENV",{"_163":164,"_165":166,"_167":82,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v1