12}
13
14import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
15import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
16
17function App() {
42 };
43
44 return React.createElement(
45 "div",
46 { className: "container mx-auto px-4 py-8" },
47 React.createElement("h1", { className: "text-3xl font-bold text-center mb-8" }, "DBpedia Entity Search"),
48 React.createElement(
49 "form",
50 { onSubmit: handleSubmit, className: "flex mb-8" },
51 React.createElement("input", {
52 type: "text",
53 value: query,
56 className: "flex-grow p-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"
57 }),
58 React.createElement(
59 "button",
60 { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded-r-md hover:bg-blue-600 transition duration-300" },
62 )
63 ),
64 results.length > 0 && React.createElement(
65 "div",
66 { className: "bg-white shadow-md rounded-md p-6" },
67 React.createElement("h2", { className: "text-2xl font-semibold mb-4" }, "Results:"),
68 React.createElement(
69 "div",
70 { className: "grid gap-6" },
71 results.map((result, index) =>
72 React.createElement(
73 "div",
74 { key: index, className: "border-b border-gray-200 pb-4 last:border-b-0 flex" },
75 result.image && React.createElement(
76 "div",
77 { className: "mr-4 flex-shrink-0" },
78 React.createElement("img", {
79 src: result.image,
80 alt: result.label,
82 })
83 ),
84 React.createElement(
85 "div",
86 { className: "flex-grow" },
87 React.createElement(
88 "a",
89 { href: result.uri, target: "_blank", rel: "noopener noreferrer", className: "text-xl font-medium text-blue-600 hover:underline" },
90 result.label
91 ),
92 React.createElement("p", { className: "mt-2 text-gray-600" }, result.description),
93 React.createElement("pre", { className: "mt-2 bg-gray-100 p-2 rounded text-sm overflow-x-auto" }, JSON.stringify(result, null, 2))
94 )
95 )
97 )
98 ),
99 React.createElement(
100 "footer",
101 { className: "mt-8 text-center text-sm text-gray-600" },
102 React.createElement(
103 "a",
104 { href: import.meta.url.replace("esm.town", "val.town"), target: "_blank", rel: "noopener noreferrer", className: "hover:underline" },
106 )
107 ),
108 React.createElement(
109 "div",
110 { className: "mt-8 bg-gray-100 p-4 rounded-md" },
111 React.createElement("h3", { className: "text-lg font-semibold mb-2" }, "cURL Example:"),
112 React.createElement(
113 "pre",
114 { className: "bg-gray-200 p-2 rounded text-sm overflow-x-auto" },
120
121function client() {
122 createRoot(document.getElementById("root")).render(React.createElement(App));
123}
124
111And the train just kept rolling.
112
113Now, StarGazer and Newtype were saying Dragon left them everything in her will. Her properties. Her patents. Even her contracts. The PRT was scrambling to try and cut them out of everything. On one level it seemed like a huge overreaction now that they all knew Newtype and StarGazer hadn't attacked Dragon. On the other, Everett kind of understood it.
114
115Dragon was a known quantity when the PRT started handing her contracts.
255And wasn't that an understatement. Speaking up, purposefully this time, Everett added, "She showed up just in time to show everyone how badly StarGazer has been sandbagging."
256
257The mere mention of the name sparked a range of reactions.
258
259It might be official.
586Chambers pinched the bridge of his nose and sighed. "We spent twenty years putting heroes on pedestals. No one is shocked when one goes and does something that seems larger than life! We can't put the cat back in the box now just because a teenager showed us up at our own game!"
587
588"She's definitely a thinker," Reed proposed. "On some level. Things work out for her too much. She reacts too quickly. Figures out what to do too readily. She might not even be aware of it."
589
590"Her power makes her more intelligent," Kamil recalled. "While we were never able to qualify or quantify it in any way, we know she's far too capable on a technical level for a sixteen-year-old."
644Did she see the cautious looks spreading through the other's screens? It really could be quite unnerving. A meeting with a disembodied voice was not new, but with Dragon it had never felt that way. Objectively, it was but also wasn't the same thing. All that really changed was his understanding.
645
646The things people knew often changed their reactions, especially in light of the things they didn't know.
647
648"Very well," Seneca decided before anyone could protest. "Given the circumstances, the PRT does not believe it is in either of our interests for Celestial Being to continue executing Dragon's contracts."
694Not that they wouldn't. Kamil expected many meetings running late into the night in his future—much like those they'd had concerning Nilbog, the Blasphemies, and the Machine Army. That Veda was now a publicly-known AI only complicated matters further, as well as her nominal status as a hero.
695
696"I see." Veda's screen watched the room with no flicker or sign of reaction. Very unnerving. "In that case, I request the right to defend my existence at a later date should the PRT choose to debate its potential responses."
697
698"Defend?" Kamil asked. "In what way?"
1# SSR React Mini & SQLite Todo App
2
3This Todo App is server rendered *and* client-hydrated React. This architecture is a lightweight alternative to NextJS, RemixJS, or other React metaframeworks with no compile or build step. The data is saved server-side in [Val Town SQLite](https://docs.val.town/std/sqlite/).
4
5
6
7## SSR React Mini Framework
8
9This ["framework"](https://www.val.town/v/stevekrouse/ssr_react_mini) is currently 44 lines of code, so it's obviously not a true replacement for NextJS or Remix.
10
11The trick is [client-side importing](https://www.val.town/v/stevekrouse/ssr_react_mini?v=53#L30) the React component that you're [server rendering](https://www.val.town/v/stevekrouse/ssr_react_mini?v=53#L35-37). Val Town is uniquely suited for this trick because it both runs your code server-side and exposes vals as [modules](https://esm.town/v/stevekrouse/TodoApp) importable by the browser.
12
13The tricky part is making sure that server-only code doesn't run on the client and vice-versa. For example, because this val colocates the server-side `loader` and `action` with the React component we have to be careful to do all server-only imports (ie sqlite) dynamically inside the [`loader`](https://www.val.town/v/stevekrouse/TodoApp?v=246#L7) and [`action`](https://www.val.town/v/stevekrouse/TodoApp?v=246#L20), so they only run server-side.
14
4 * and a rich text editor. The user's command, additional context, and current text are sent to the Cerebras API,
5 * which returns the modified text to be displayed in the editor.
6 * We use React for the UI, the Web Speech API for speech recognition, and the Cerebras API for text processing.
7 */
8
60 <head>
61 <title>My AI Pen✒️</title>
62 <link href="https://esm.sh/react-quill@2.0.0/dist/quill.snow.css" rel="stylesheet">
63 <style>${css}</style>
64 </head>
66 <div id="root"></div>
67 <script type="module">
68 import React, { useState, useRef, useEffect } from "https://esm.sh/react";
69 import { createRoot } from "https://esm.sh/react-dom/client";
70 import ReactQuill from "https://esm.sh/react-quill";
71
72 function App() {
159 }, [editorContent]);
160
161 return React.createElement(
162 "div",
163 { className: "container" },
164 React.createElement("h1", null, "My AI Pen✒️"),
165 React.createElement(
166 "label",
167 { htmlFor: "command-input", className: "command-label" },
168 "Text Modification Command"
169 ),
170 React.createElement(
171 "form",
172 { onSubmit: handleSubmit, className: "command-form" },
173 React.createElement(
174 "div",
175 { className: "input-row" },
176 React.createElement("input", {
177 type: "text",
178 value: command,
182 id: "command-input",
183 }),
184 React.createElement(
185 "button",
186 {
192 isListening ? "🛑" : "🎤"
193 ),
194 React.createElement(
195 "button",
196 { type: "submit", disabled: isLoading },
198 )
199 ),
200 React.createElement(
201 "div",
202 { className: "context-dropdown" },
203 React.createElement(
204 "button",
205 {
210 isContextExpanded ? "▲ Hide Additional Context" : "▼ Show Additional Context"
211 ),
212 isContextExpanded && React.createElement(
213 "div",
214 { className: "context-content" },
215 React.createElement(
216 "label",
217 { htmlFor: "additional-context", className: "context-label" },
218 "Additional Context"
219 ),
220 React.createElement("textarea", {
221 id: "additional-context",
222 value: additionalContext,
228 )
229 ),
230 React.createElement(ReactQuill, {
231 ref: quillRef,
232 value: editorContent,
238 modules: { toolbar: true }
239 }),
240 success && React.createElement(
241 "div",
242 { className: "success-indicator" },
243 "✓ Applied successfully"
244 ),
245 React.createElement(
246 "div",
247 { className: "source-link" },
248 React.createElement(
249 "a",
250 {
258 }
259
260 createRoot(document.getElementById("root")).render(React.createElement(App));
261 </script>
262 </body>
