[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_152":153,"_154":155},"routes/_app.x.$handle.$name",{"_16":17,"_20":21,"_86":66,"_87":88,"_64":-7,"_89":-5,"_13":90,"_91":92,"_11":93,"_94":95,"_96":97,"_98":-5,"_99":-5,"_100":101,"_102":63,"_103":104,"_105":26,"_106":-5,"_107":-5,"_108":109},"routes/_app.x.$handle.$name.search.$(branch)",{"_11":12,"_13":14,"_15":-5,"_16":17},"files",[],"project",{"_18":19,"_20":21,"_22":23,"_24":-5,"_25":26,"_27":28,"_29":28,"_30":-5,"_31":-5,"_32":33,"_34":35,"_36":26,"_37":-5,"_38":-5,"_39":40,"_41":42,"_43":-5,"_44":-5,"_45":-5,"_46":-5,"_47":48,"_49":48,"_50":51,"_52":51,"_53":51,"_54":48,"_55":48,"_56":57,"_58":59,"_60":61,"_62":63},"query","handle","jdan","id","6f3ef1a8-27a8-11f0-9edc-569c3dd06744","name","highApricotImpala","createdAt",["D",1746226482285],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","userId","d402a971-ec8f-4d0e-89f0-ffd768759076","pinnedFileId","6f4323fe-27a8-11f0-9edc-569c3dd06744","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",{"_16":17,"_85":81},"org",{"_16":17,"_79":-5,"_80":81,"_32":33,"_82":83,"_84":63},"branch",{"_64":65,"_20":66,"_18":67,"_68":19,"_69":70,"_71":40,"_72":73,"_74":75,"_76":42,"_77":21,"_78":17},"isOwned",false,"version",1,"main","6f3f3b86-27a8-11f0-9edc-569c3dd06744","projectId","forkedBranchId","48c614ac-27a8-11f0-9edc-569c3dd06744","forkedBranchVersion","forkedProjectPrivacy","unlisted","forkedProjectId","48c5c5ec-27a8-11f0-9edc-569c3dd06744","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJsV0d2bDdqQTdBMGNpY2REV082Q0daSDRlcCJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","path","","adoptOrgId",{"_18":19,"_20":21,"_22":148,"_24":-5,"_25":26,"_27":28,"_29":28,"_30":-5,"_31":-5,"_32":33,"_34":35,"_36":26,"_37":-5,"_38":-5,"_39":40,"_41":42,"_43":-5,"_44":-5,"_45":-5,"_46":-5,"_47":48,"_49":48,"_50":51,"_52":51,"_53":51,"_54":48,"_55":48,"_56":149,"_58":150,"_60":151,"_62":63},"tree",[143],[143],"counts",{"_133":40,"_134":65,"_135":40,"_136":137,"_138":139},"contents",[117],"file","upstreamProject","upstreamBranch",{"_18":70,"_22":110,"_111":112,"_20":66,"_68":75,"_64":113,"_69":-5,"_71":-5,"_114":115,"_24":-5,"_62":63,"_27":73,"_78":17,"_41":42,"_77":116},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746226417737],"updatedAt",["D",1734983052913],33,"lockfileKey","1755566790378-esm.town_v_jdan_ankiDeckImporterFrontend@33-main","ankiDeckImporterFrontend",{"_18":118,"_20":119,"_120":35,"_121":-5,"_122":67,"_123":65,"_124":26,"_22":125,"_64":40,"_126":127,"_128":129,"_130":63,"_131":-5,"_87":132},"6f432322-27a8-11f0-9edc-569c3dd06744","main.tsx","fileId","parentId","branchId","branchVersion","latest",["D",1736522207647],"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}","deleted","label",[119],"pulls","branches","forks","envVars",{"_140":40,"_142":40},"connections",{"_140":40,"_141":40},"count","unfilledCount","emptyCount",{"_18":118,"_20":119,"_120":35,"_121":-5,"_122":67,"_123":65,"_124":26,"_22":144,"_64":40,"_126":127,"_128":129,"_130":63,"_131":-5,"_145":146,"_87":147},["D",1736522207647],"children",[],[119],["D",1746226482285],{"_16":17,"_85":81},{"_16":17,"_79":-5,"_80":81,"_32":33,"_82":83,"_84":63},{"_64":65,"_20":66,"_18":67,"_68":19,"_69":70,"_71":40,"_72":73,"_74":75,"_76":42,"_77":21,"_78":17},"ctx",{"_56":-5,"_107":185,"_186":187,"_188":189,"_190":63,"_191":63,"_192":63,"_193":26,"_194":-5,"_195":-7,"_196":-7,"_197":40,"_198":63,"_199":63,"_200":-5,"_201":63,"_202":63,"_203":63,"_204":-5},"ENV",{"_156":157,"_158":159,"_160":66,"_161":162,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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"]

Search