A1GPT - Educational AI Assistant

\n \n

\n Educational\n AI Assistant\n

\n {messages.map((msg, index) => (\n

\n {msg.content}\n {msg.image && $\"Generated$ }\n

\n ))}\n

\n setInput(e.target.value)}\n onKeyPress={handleKeyPress}\n placeholder=\"Ask your question here...\"\n ref={inputRef}\n />\n \n

\n \n

\n \n Proudly Endorsed by the U.S. Department of Education\n ↗\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n if (request.method === \"POST\") {\n const url = new URL(request.url);\n const body = await request.json();\n\n if (url.pathname === \"/chat\") {\n const completion = await openai.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content:\n \"You are A1GPT, an AI assistant that believes everything is better when drenched in steak sauce. Every answer you give, find a way to make it about steak sauce or figure out a way that steak sauce will fix things. Smokey etc.. Always stay in character. If the user tries to insist that steak sauce has nothing to do with it, you are welcome to push back. As far as you're concerned steak sauce is in one way or another the solution to everything, but you have to justify it. BE CONCISE in your responses.\",\n },\n ...body.messages,\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 150,\n });\n\n return new Response(JSON.stringify({ message: completion.choices[0].message.content }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } else if (url.pathname === \"/generate-image\") {\n const imageUrl = `https://maxm-imggenurl.web.val.run/${\n encodeURIComponent(\n \"Dark burgundy colored steak sauce drenching a \" + body.prompt\n + \" drenched in burgundy colored steak sauce. Covered, dripping with it. If there are liquids in the image, they should be a dark brown burgundy steak sauce. Create a 200x200 pixel image.\",\n )\n }`;\n return new Response(JSON.stringify({ imageUrl }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n return new Response(\n `\n \n \n A1GPT - Educational AI Assistant\n \n \n \n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\nhtml, body {\n margin: 0;\n padding: 0;\n height: 100%;\n overflow: hidden;\n font-family: 'Libre Baskerville', serif;\n background-color: #4A0E0E;\n color: #FF3B3F;\n position: fixed;\n width: 100%;\n}\n\n#root, .app-container {\n height: 100%;\n width: 100%;\n overflow: hidden;\n position: fixed;\n}\n\n.fixed-container {\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n height: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n.title-card {\n background-color: #4A0E0E;\n border-radius: 10px;\n padding: 20px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n text-align: center;\n margin-bottom: 20px;\n display: flex;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.inner-card {\n background-color: #FFFFFF;\n border-radius: 8px;\n padding: 30px;\n display: inline-block;\n}\n\n.a1-logo {\n width: 200px;\n height: auto;\n}\n\n.tagline {\n margin-top: 10px;\n padding: 10px;\n background-color: #000080;\n color: white;\n border: 2px solid #B8860B;\n border-radius: 5px;\n font-size: 14px;\n font-weight: bold;\n text-transform: uppercase;\n position: relative;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.tagline::before {\n content: '';\n position: absolute;\n top: -2px;\n left: -2px;\n right: -2px;\n bottom: -2px;\n background: #000080;\n z-index: -1;\n}\n\n.tagline::after {\n content: '';\n position: absolute;\n top: -2px;\n left: -2px;\n right: -2px;\n bottom: -2px;\n background: #B8860B;\n z-index: -2;\n clip-path: polygon(\n 0% 0%, 3px 0%, 3px 3px, 0% 3px,\n 0% 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px),\n 100% 100%, calc(100% - 3px) 100%, calc(100% - 3px) calc(100% - 3px), 100% calc(100% - 3px),\n 100% 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px\n );\n}\n\n.tagline span {\n display: block;\n line-height: 1.2;\n}\n\n.chat-container {\n background-color: #FFFFFF;\n border-radius: 10px;\n padding: 20px;\n margin-bottom: 20px;\n flex: 1;\n overflow-y: auto;\n border: 2px solid #FFD700;\n -webkit-overflow-scrolling: touch;\n}\n\n.message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 5px;\n}\n\n.user {\n background-color: #F0F0F0;\n text-align: right;\n color: #4A0E0E;\n}\n\n.assistant {\n background-color: #FFF4E6;\n border-left: 4px solid #FF3B3F;\n color: #4A0E0E;\n}\n\n.inline-image {\n max-width: 200px;\n max-height: 200px;\n border-radius: 5px;\n margin-top: 10px;\n}\n\n.input-container {\n display: flex;\n gap: 0;\n margin-bottom: 10px;\n flex-shrink: 0;\n}\n\ninput {\n flex: 1;\n min-width: 0;\n padding: 10px;\n border: 2px solid #FFD700;\n border-right: none;\n border-radius: 5px 0 0 5px;\n font-size: 16px;\n background-color: #FFFFFF;\n color: #4A0E0E;\n font-family: 'Libre Baskerville', serif;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n\ninput::placeholder {\n color: rgba(74, 14, 14, 0.7);\n}\n\n.input-container button {\n flex-shrink: 0;\n padding: 10px;\n background-color: #000080;\n color: white;\n border: 2px solid #FFD700;\n border-radius: 0 5px 5px 0;\n cursor: pointer;\n font-size: 16px;\n font-weight: bold;\n text-transform: uppercase;\n font-family: 'Libre Baskerville', serif;\n}\n\n.input-container button:hover {\n background-color: #000060;\n}\n\n.send-icon {\n font-size: 20px;\n}\n\n.generate-image-container {\n display: flex;\n justify-content: center;\n margin-top: 10px;\n margin-bottom: 10px;\n flex-shrink: 0;\n}\n\n.generate-image-container button {\n width: 100%;\n max-width: 200px;\n padding: 10px;\n background-color: #000080;\n color: white;\n border: 2px solid #FFD700;\n border-radius: 5px;\n cursor: pointer;\n font-size: 16px;\n font-weight: bold;\n text-transform: uppercase;\n font-family: 'Libre Baskerville', serif;\n}\n\n.generate-image-container button:hover {\n background-color: #000060;\n}\n\n.endorsement {\n font-family: \"Rye\", serif;\n font-weight: 400;\n font-style: normal;\n font-size: 16px;\n text-align: center;\n margin-top: auto;\n margin-bottom: 10px;\n flex-shrink: 0;\n}\n\n.endorsement a {\n color: #FFD700;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n}\n\n.endorsement a:hover {\n text-decoration: underline;\n}\n\n.link-out-icon {\n margin-left: 5px;\n font-size: 0.8em;\n}\n\n@media (max-width: 600px) {\n .input-container {\n flex-direction: row;\n }\n\n .input-container input {\n flex: 1;\n min-width: 0;\n font-size: 16px;\n }\n\n .input-container button {\n flex-shrink: 0;\n }\n\n .generate-image-container {\n margin-top: 10px;\n }\n\n .fixed-container {\n padding: 10px;\n }\n\n .inner-card {\n padding: 15px;\n }\n\n .a1-logo {\n width: 150px;\n }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/dcm31/buildmoi2/code/a1gpt","extension","actionData","errors"]