cerebras_codermain.tsx1 match
6await createTables();
78export default async function cerebras_coder(req: Request): Promise<Response> {
9if (req.method === "POST") {
10let { prompt, currentCode, versionHistory, projectId } = await req.json();
cerebras_coderindex.ts7 matches
23);
2425function Hero({
26prompt,
27setPrompt,
4445<p className="text-[#bababa] text-center max-w-[25ch] mx-auto my-4 font-dm-sans">
46Turn your ideas into fully functional apps in{" "}
47<span className="relative w-fit text-fuchsia-400 z-10 italic font-semibold rounded-full">
48less than a second
115}
116117function App() {
118const previewRef = React.useRef<HTMLDivElement>(null);
119const [prompt, setPrompt] = useState("");
169});
170171function handleStarterPromptClick(promptItem: typeof prompts[number]) {
172setLoading(true);
173setTimeout(() => handleSubmit(promptItem.prompt), 0);
174}
175176async function handleSubmit(e: React.FormEvent | string) {
177if (typeof e !== "string") {
178e.preventDefault();
225}
226227function handleVersionChange(direction: "back" | "forward") {
228const { currentVersionIndex, versions } = versionHistory;
229if (direction === "back" && currentVersionIndex > 0) {
973);
974975function client() {
976const path = window.location.pathname;
977const root = createRoot(document.getElementById("root")!);
cerebras_coderindex.html1 match
19<meta property="og:site_name" content="Cerebras Coder">
20<meta property="og:url" content="https://cerebrascoder.com"/>
21<meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
22<meta property="og:type" content="website">
23<meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
cerebras_codergenerate-code.ts2 matches
2import STARTER_PROMPTS from "../public/starter-prompts.js";
34function extractCodeFromFence(text: string): string {
5const htmlMatch = text.match(/```html\n([\s\S]*?)\n```/);
6return htmlMatch ? htmlMatch[1].trim() : text;
7}
89export async function generateCode(prompt: string, currentCode: string) {
10const starterPrompt = STARTER_PROMPTS.find(p => p.prompt === prompt);
11if (starterPrompt) {
15const LOCAL_STORAGE_SYNC_ID_KEY = "planty_sync_id_valtown";
1617function generateNewSyncIdInternal() {
18return `sync_${Date.now().toString(36)}${Math.random().toString(36).substring(2, 9)}`;
19}
2021function getSyncIdFromLocalStorage() {
22if (typeof localStorage !== "undefined") {
23return localStorage.getItem(LOCAL_STORAGE_SYNC_ID_KEY);
26}
2728function setSyncIdInLocalStorage(syncId) {
29if (typeof localStorage !== "undefined") {
30localStorage.setItem(LOCAL_STORAGE_SYNC_ID_KEY, syncId);
36const SyncIdContext = createContext<string | null>(null);
3738function useSyncId() {
39return useContext(SyncIdContext);
40}
4142// Main App Component
43function App() {
44const location = useLocation();
45const navigate = useNavigate();
106107// Wrapped App with Router
108function RoutedApp() {
109return (
110<Router>
114}
115116function PlantView() {
117const syncId = useSyncId();
118if (!syncId) return <div>Loading sync information...</div>;
125}
126127function Plant() {
128const syncId = useSyncId();
129const [lastWatered, setLastWatered] = useState(null);
131const [showModal, setShowModal] = useState(false);
132133async function fetchLastWateredInternal() {
134if (!syncId) return;
135setIsLoading(true);
150}, [syncId]);
151152function getTimeSinceLastWatering() {
153if (lastWatered === null || typeof lastWatered === "undefined") return "Never";
154const now = Date.now();
162}
163164function getTextColorClass() {
165if (lastWatered === null || typeof lastWatered === "undefined") return "text-red-600";
166const days = Math.floor((Date.now() - Number(lastWatered)) / (1000 * 60 * 60 * 24));
204}
205206function WatererSelectionModal({ onClose, onWatered }) {
207const syncId = useSyncId();
208const [waterers, setWaterers] = useState([]);
210const [isAdding, setIsAdding] = useState(false);
211212async function fetchWaterersInternal() {
213if (!syncId) return;
214try {
227}, [syncId]);
228229async function handleWatering(watererName) {
230if (!syncId || !watererName) return;
231try {
242}
243244async function handleAddWatererAndWater() {
245if (!syncId || !newWatererName.trim()) return;
246setIsAdding(true);
315}
316317function HistoryView() {
318const syncId = useSyncId();
319if (!syncId) return <div>Loading sync information...</div>;
327}
328329function WateringHistoryComponent() {
330const syncId = useSyncId();
331const [waterers, setWaterers] = useState([]);
335const [isProcessing, setIsProcessing] = useState(false);
336337async function fetchDataInternal() {
338if (!syncId) return;
339setIsLoading(true);
365}, [syncId]);
366367async function handleAddWaterer() {
368if (!syncId || !newWatererName.trim()) return;
369setIsProcessing(true);
387}
388389async function handleRenameWaterer(watererId, currentName) {
390if (!syncId || !watererId) return;
391const newName = prompt("Enter new name for " + currentName + ":", currentName);
407}
408409async function handleDeleteWaterer(watererId, watererName) {
410if (!syncId || !watererId) return;
411if (!confirm(`Are you sure you want to delete waterer "${watererName}"? This cannot be undone.`)) return;
421}
422423async function handleDeleteHistoryEntry(entryId) {
424if (!syncId || !entryId) return;
425if (!confirm("Are you sure you want to delete this history entry? This cannot be undone.")) return;
524// --- SYNC SETTINGS COMPONENTS ---
525526function SyncSettingsView() {
527const syncId = useSyncId();
528if (!syncId) return <div>Loading sync information...</div>;
535}
536537function SyncSettingsComponent({ currentSyncId }) {
538const [newCodeInput, setNewCodeInput] = useState("");
539const [copied, setCopied] = useState(false);
676// --- END SYNC SETTINGS COMPONENTS ---
677678function client() {
679// Use the RoutedApp which includes BrowserRouter
680createRoot(document.getElementById("root")).render(<RoutedApp />);
683if (typeof document !== "undefined") { client(); }
684685export default async function server(request: Request): Promise<Response> {
686const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
687761762// Helper to get or create instance data
763async function getInstanceData(currentSyncId: string) {
764let result = await sqlite.execute(
765`SELECT waterers, watering_log, last_watered_timestamp FROM instances WHERE sync_id = ?`,
788789// Helper to update instance data
790async function updateInstanceData(
791currentSyncId: string,
792data: { waterers: any[]; watering_log: any[]; last_watered_timestamp: number | null },
957<script>
958if ('serviceWorker' in navigator) {
959window.addEventListener('load', function() {
960navigator.serviceWorker.register('/sw.js');
961});
1export default async function (req: Request): Promise<Response> {
2return Response.json({ ok: true })
3}
2import { StdioServerTransport } from "https://esm.town/@modelcontextprotocol/sdk/server/stdio.js";
34export function handler(request: Request) {
5return Response.json({ ok: true });
6}
4// import tailwind from "npm:tailwindcss@4.1.6";
56export function Layout({ children }: { children: ReactNode }) {
7return (
8<html lang="en">
markdownBlogStarterindex.tsx3 matches
5import { Layout } from "./Layout.tsx";
67function PostComponent({ markdown, link }: { markdown: string; link?: string }) {
8return (
9<div style={{ border: "1px solid gray", padding: "10px", marginBottom: "20px", borderRadius: "5px" }}>
14}
1516export default async function(req: Request): Promise<Response> {
17const url = new URL(req.url);
18if (url.pathname === "/") {
55}
5657function html(children: React.ReactNode) {
58return new Response(
59renderToString(
cerebras_coderstarter-prompts.js2 matches
4"title": "Todo App",
5"code":
6"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Task Master</title>\n <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n</head>\n<body class=\"bg-gray-100\">\n <div class=\"max-w-md mx-auto mt-12 p-6 rounded-lg shadow-md bg-white\">\n <div class=\"flex justify-between items-center mb-6\">\n <h2 class=\"text-2xl font-bold\">Task Master</h2>\n <span class=\"text-gray-600\">Manage your tasks efficiently</span>\n </div>\n <ul class=\"todo-list\" id=\"todo-list\"></ul>\n <div class=\"add-todo mt-6 flex justify-between items-center\">\n <input type=\"text\" id=\"todo-input\" placeholder=\"Add new task\" class=\"w-full py-2 pl-10 text-sm text-gray-800 border border-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-600 bg-gray-50\">\n <button type=\"button\" id=\"add-todo-btn\" class=\"ml-4 px-4 py-2 bg-green-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-green-700 hover:shadow-lg focus:bg-green-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-800 active:shadow-lg transition duration-150 ease-in-out\">Add Task</button>\n </div>\n <div class=\"mt-6 text-center text-gray-600\">\n Built on <a href=\"https://cerebrascoder.com\" target=\"_blank\" class=\"text-gray-900 underline\">Cerebras Coder</a>\n </div>\n </div>\n\n <script>\n // Get the todo list and add todo button elements\n const todoList = document.getElementById('todo-list');\n const addTodoBtn = document.getElementById('add-todo-btn');\n const todoInput = document.getElementById('todo-input');\n\n // Load todos from local storage\n let todos = JSON.parse(localStorage.getItem('todos')) || [];\n\n // Function to render the todo list\n function renderTodoList() {\n todoList.innerHTML = '';\n todos.forEach((todo, index) => {\n const todoItem = document.createElement('li');\n todoItem.innerHTML = `\n <div class=\"flex justify-between items-center py-4 border-b border-gray-300\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"todo-${index}\" class=\"mr-4\" ${todo.completed ? 'checked' : ''}>\n <span class=\"todo-text ${todo.completed ? 'text-gray-400 line-through' : 'text-gray-600'}\">${todo.text}</span>\n </div>\n <button type=\"button\" class=\"px-4 py-2 bg-red-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg transition duration-150 ease-in-out delete-todo\" data-index=\"${index}\">Delete</button>\n </div>\n `;\n todoList.appendChild(todoItem);\n });\n }\n\n // Render the initial todo list\n renderTodoList();\n\n // Add event listener to the add todo button\n addTodoBtn.addEventListener('click', () => {\n const todoText = todoInput.value.trim();\n if (todoText) {\n todos.push({ text: todoText, completed: false });\n localStorage.setItem('todos', JSON.stringify(todos));\n todoInput.value = '';\n renderTodoList();\n }\n });\n\n // Add event listener to the todo list\n todoList.addEventListener('change', (e) => {\n if (e.target.type === 'checkbox') {\n const index = parseInt(e.target.id.split('-')[1]);\n todos[index].completed = e.target.checked;\n localStorage.setItem('todos', JSON.stringify(todos));\n renderTodoList();\n }\n });\n\n // Add event listener to the delete todo buttons\n todoList.addEventListener('click', (e) => {\n if (e.target.classList.contains('delete-todo')) {\n const index = parseInt(e.target.dataset.index);\n todos.splice(index, 1);\n localStorage.setItem('todos', JSON.stringify(todos));\n renderTodoList();\n }\n });\n </script>\n</body>\n</html>",
7"performance": {
8"tokensPerSecond": 2298.56,
26"title": "Markdown Editor",
27"code":
28"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Markdown Editor</title>\n <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n</head>\n<body class=\"bg-white\">\n <div class=\"max-w-full mx-auto p-4 pt-6 md:p-6 lg:p-8\">\n <h1 class=\"text-3xl text-center mb-4\">Markdown Editor</h1>\n <div class=\"flex flex-row\">\n <div class=\"editor p-4 rounded-lg border border-gray-200 w-full md:w-1/2\">\n <textarea id=\"editor\" class=\"w-full h-screen p-2 border border-gray-200 rounded-lg\" placeholder=\"Type your Markdown here...\"></textarea>\n </div>\n <div class=\"preview p-4 rounded-lg border border-gray-200 w-full md:w-1/2 ml-2 md:ml-4 lg:ml-8\">\n <div id=\"preview\"></div>\n </div>\n </div>\n <p class=\"text-center mt-4\">Built on <a href=\"https://cerebrascoder.com\">Cerebras Coder</a></p>\n </div>\n\n <script>\n const editor = document.getElementById('editor');\n const preview = document.getElementById('preview');\n\n // Initialize textarea with default markdown\n const defaultMarkdown = `\n# Introduction to Markdown\nMarkdown is a lightweight markup language that is easy to read and write. It is often used for formatting text in plain text editors, chat applications, and even web pages.\n\n## Headers\nHeaders are denoted by the # symbol followed by a space. The number of # symbols determines the level of the header:\n# Heading 1\n## Heading 2\n### Heading 3\n\n## Emphasis\nYou can use emphasis to make your text **bold** or *italic*:\n*Italics*\n**Bold**\n\n## Lists\nYou can use lists to organize your text:\n* Item 1\n* Item 2\n* Item 3\nOr\n1. Item 1\n2. Item 2\n3. Item 3\n\n## Links\nYou can use links to reference external resources:\n[Google](https://www.google.com)\n\n## Images\nYou can use images to add visual content:\n\n`;\n editor.value = defaultMarkdown;\n\n // Update preview on input\n editor.addEventListener('input', () => {\n const markdown = editor.value;\n const html = markdownToHtml(markdown);\n preview.innerHTML = html;\n });\n\n // Initialize preview with default markdown\n const defaultHtml = markdownToHtml(defaultMarkdown);\n preview.innerHTML = defaultHtml;\n\n // Function to convert Markdown to HTML\n function markdownToHtml(markdown) {\n // Bold\n markdown = markdown.replace(/\\*\\*(.*?)\\*\\*/g, '<b>$1</b>');\n\n // Italic\n markdown = markdown.replace(/\\*(.*?)\\*/g, '<i>$1</i>');\n\n // Links\n markdown = markdown.replace(/\\[(.*?)\\]\\((.*?)\\)/g, '<a href=\"$2\">$1</a>');\n\n // Images\n markdown = markdown.replace(/!\\[(.*?)\\]\\((.*?)\\)/g, '<img src=\"$2\" alt=\"$1\">');\n\n // Headings\n markdown = markdown.replace(/(^#{1,6} )(.*)/gm, (match, level, text) => {\n return `<h${level.length}>${text}</h${level.length}>`;\n });\n\n // Lists\n markdown = markdown.replace(/^(\\*|\\d+\\.) (.*)/gm, (match, marker, text) => {\n if (marker.startsWith('*')) {\n return `<li>${text}</li>`;\n } else {\n return `<li>${text}</li>`;\n }\n });\n\n // Line breaks\n markdown = markdown.replace(/\\n/g, '<br>');\n\n // Fix for nested lists\n markdown = markdown.replace(/<li><li>/g, '<li>');\n markdown = markdown.replace(/<\\/li><\\/li>/g, '</li>');\n\n // Wrap lists in ul\n markdown = markdown.replace(/(<li>.*<\\/li>)/g, '<ul>$1</ul>');\n\n return markdown;\n }\n </script>\n</body>\n</html>",
29"performance": {
30"tokensPerSecond": 4092.96,