🃏 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",[123],"pulls","forks","envVars",{"_143":34,"_145":34},"connections",{"_143":34,"_144":34},"count","unfilledCount","emptyCount",{"_20":122,"_13":123,"_124":49,"_125":-5,"_126":21,"_127":30,"_128":40,"_22":147,"_29":34,"_130":131,"_132":133,"_134":76,"_135":-5,"_148":149,"_92":150},["D",1736522207647],"children",[],[123],["D",1746226482285],{"_11":12,"_90":86},{"_11":12,"_84":-5,"_85":86,"_46":47,"_87":88,"_89":76},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":32,"_33":34,"_77":78,"_79":80,"_81":55,"_82":14,"_83":12},"ctx",{"_69":-5,"_113":188,"_189":190,"_191":192,"_193":76,"_194":76,"_195":76,"_196":40,"_197":-5,"_198":-7,"_199":-7,"_200":34,"_201":76,"_202":76,"_203":-5,"_204":76,"_205":76,"_206":76,"_207":-5},"ENV",{"_159":160,"_161":162,"_163":26,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187},"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"]

Branches1

Branches
1