📚 Bookshelf Transcriber

\n \n {error &&

{error}

}\n {books.length > 0 && (\n

📚 Transcribed Books:

\n {book.isbn && (\n \n )}\n
\n {book.title} by {book.author}\n {book.isbn && (\n \n (ISBN:{\" \"}\n \n {book.isbn}\n )\n \n )}\n
\n

\n )}\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\nasync function getISBN(title: string, author: string): Promise {\n const query = encodeURIComponent(`${title} ${author}`);\n const url = `https://openlibrary.org/search.json?q=${query}&limit=1`;\n \n try {\n const response = await fetch(url);\n const data = await response.json();\n if (data.docs && data.docs.length > 0 && data.docs[0].isbn) {\n return data.docs[0].isbn[0];\n }\n } catch (error) {\n console.error(\"Error fetching ISBN:\", error);\n }\n return undefined;\n}\n\nasync function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/transcribe\") {\n const formData = await request.formData();\n const image = formData.get(\"image\") as File;\n\n if (!image) {\n return new Response(JSON.stringify({ error: \"Missing image\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n try {\n const genAI = new GoogleGenerativeAI(Deno.env.get(\"GOOGLE_GENERATIVE_AI\"));\n const model = genAI.getGenerativeModel({ model: \"gemini-1.5-flash\" , generationConfig: {\n responseMimeType: \"application/json\",\n } });\n\n const base64Image = await fileToBase64(image);\n\n const result = await model.generateContent([\n \"Write all the names and authors of these books in JSON format. The response should be a valid JSON array of objects, each with 'title' and 'author' properties.\",\n {\n inlineData: {\n data: base64Image,\n mimeType: image.type,\n },\n },\n ]);\n\n const jsonString = result.response.text();\n console.log(\"JSON string:\", jsonString);\n\n const cleanJsonString = jsonString.replace(/^```json\\n?|\\n?```$/g, '');\n let books: Book[] = JSON.parse(cleanJsonString);\n\n // Fetch ISBN for each book\n books = await Promise.all(books.map(async (book) => {\n const isbn = await getISBN(book.title, book.author);\n return { ...book, isbn };\n }));\n\n return new Response(JSON.stringify({ books }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Error:\", error);\n return new Response(JSON.stringify({ error: \"An error occurred\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n return new Response(\n `\n \n \n 📚 Bookshelf Transcriber\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: 'Bookman Old Style', Georgia, serif;\n line-height: 1.6;\n margin: 0;\n padding: 0;\n background-color: #f0e6d2;\n color: #3a3a3a;\n}\n\n.container {\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);\n}\n\nh1, h2 {\n color: #8b4513;\n text-align: center;\n}\n\nform {\n margin-bottom: 20px;\n}\n\n.dropzone {\n border: 3px dashed #8b4513;\n border-radius: 10px;\n padding: 40px;\n text-align: center;\n cursor: pointer;\n background-color: #f9f5eb;\n transition: background-color 0.3s ease;\n}\n\n.dropzone:hover {\n background-color: #f0e6d2;\n}\n\nbutton {\n display: block;\n width: 100%;\n background-color: #8b4513;\n color: #fff;\n border: none;\n padding: 15px;\n border-radius: 5px;\n font-size: 18px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n margin-top: 20px;\n}\n\nbutton:hover:not(:disabled) {\n background-color: #a0522d;\n}\n\nbutton:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\n.error {\n color: #dc3545;\n text-align: center;\n margin-top: 10px;\n}\n\n.result {\n margin-top: 30px;\n background-color: #f9f5eb;\n padding: 20px;\n border-radius: 10px;\n}\n\nul {\n list-style-type: none;\n padding: 0;\n}\n\nli {\n margin-bottom: 20px;\n display: flex;\n align-items: start;\n background-color: #fff;\n padding: 15px;\n border-radius: 5px;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n}\n\n.book-cover {\n width: 100px;\n height: auto;\n margin-right: 15px;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n.book-info {\n flex: 1;\n}\n\nli a {\n color: #8b4513;\n text-decoration: none;\n}\n\nli a:hover {\n text-decoration: underline;\n}\n\n.footer {\n margin-top: 30px;\n text-align: center;\n}\n\n.footer a {\n color: #8b4513;\n text-decoration: none;\n}\n\n.footer a:hover {\n text-decoration: underline;\n}\n`;\n\nexport default server;","deleted","label",[98],"permalink","https://www.val.town/x/stevekrouse/sophisticatedTomatoBoa/code/main.tsx","extension","actionData","errors"]