Spaces:
Running
Running
| <html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/><link rel="preload" href="/_next/static/media/58f662ed5ba12a72-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/c3f6eb667c0186c5-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/e4af272ccee01ff0-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/cd0b83e1150c7a83.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-5d4f0cacdd7dc40f.js"/><script src="/_next/static/chunks/4bd1b696-e965f41bb10bd643.js" async=""></script><script src="/_next/static/chunks/684-5e7dfc6ca8c473b0.js" async=""></script><script src="/_next/static/chunks/main-app-4d6ec2c81d659956.js" async=""></script><script src="/_next/static/chunks/486-c1c1009c9354e890.js" async=""></script><script src="/_next/static/chunks/83-70dc4fb967061d37.js" async=""></script><script src="/_next/static/chunks/app/layout-185f21d645185bb1.js" async=""></script><script src="/_next/static/chunks/06bf0ff1-f728958255a9b8b2.js" async=""></script><script src="/_next/static/chunks/478-6d6523bbc22b7910.js" async=""></script><script src="/_next/static/chunks/835-8df0fce1a9c59183.js" async=""></script><script src="/_next/static/chunks/app/test-generation/page-2ee26d4a80208621.js" async=""></script><meta name="next-size-adjust" content=""/><meta name="theme-color" content="#000000"/><title>DeepStudio | Agentic AI Development 🎨</title><meta name="description" content="DeepStudio is an AI-powered development environment that enables autonomous multi-file development through intelligent tool usage. Build complete applications with natural language."/><meta name="mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-title" content="DeepStudio"/><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/><meta property="og:title" content="DeepStudio | Agentic AI Development 🎨"/><meta property="og:description" content="DeepStudio is an AI-powered development environment that enables autonomous multi-file development through intelligent tool usage. Build complete applications with natural language."/><meta property="og:url" content="https://huggingface.co/spaces/otst/deepstudio"/><meta property="og:site_name" content="DeepStudio"/><meta property="og:image" content="https://huggingface.co/spaces/otst/deepstudio/resolve/main/banner.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="DeepStudio Open Graph Image"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="DeepStudio | Agentic AI Development 🎨"/><meta name="twitter:description" content="DeepStudio is an AI-powered development environment that enables autonomous multi-file development through intelligent tool usage. Build complete applications with natural language."/><meta name="twitter:image" content="https://huggingface.co/spaces/otst/deepstudio/resolve/main/banner.png"/><link rel="shortcut icon" href="/deepstudio-logo-dark.svg"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/><link rel="icon" href="/deepstudio-logo-dark.svg"/><link rel="apple-touch-icon" href="/deepstudio-logo-dark.svg"/><script>document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="__variable_f367f3 __variable_438d47 antialiased bg-background h-[100dvh] overflow-hidden"><script>((e,t,r,n,a,o,i,s)=>{let u=document.documentElement,l=["light","dark"];function c(t){var r;(Array.isArray(e)?e:[e]).forEach(e=>{let r="class"===e,n=r&&o?a.map(e=>o[e]||e):a;r?(u.classList.remove(...n),u.classList.add(o&&o[t]?o[t]:t)):u.setAttribute(e,t)}),r=t,s&&l.includes(r)&&(u.style.colorScheme=r)}if(n)c(n);else try{let e=localStorage.getItem(t)||r,n=i&&"system"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e;c(n)}catch(e){}})("class","deepstudio-theme","dark",null,["light","dark"],null,true,true)</script><section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section><div class="h-screen flex flex-col"><div class="border-b bg-card shadow-sm relative z-20 "><div class="px-3 py-2 flex items-center justify-between"><button class="flex items-center gap-2 p-1 pr-2 hover:ring-1 hover:ring-border rounded-sm transition-all"><div style="width:24px;height:24px"></div><span class="font-semibold text-lg hidden md:inline">Model Tester</span></button><div class="flex items-center gap-2 flex-1 justify-center md:justify-start md:ml-6"><h1 class="text-lg font-semibold md:hidden">Model Tester</h1></div><div class="flex items-center gap-2"><div class="hidden md:flex items-center gap-2"><button data-slot="button" class="inline-flex items-center cursor-pointer whitespace-nowrap font-sans font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-full text-[13px] gap-1.5 px-3 justify-start"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left h-4 w-4 mr-2" aria-hidden="true"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg>Back to Projects</button></div><button data-slot="button" class="inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-full text-sm font-sans font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9 h-8 w-8 md:hidden"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div></div></div><div class="flex-1 overflow-auto bg-background p-6"><div class="max-w-6xl mx-auto"><div class="bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-6"><div class="flex items-start gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-alert h-5 w-5 text-blue-600 dark:text-blue-400 mt-0.5" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="8" y2="12"></line><line x1="12" x2="12.01" y1="16" y2="16"></line></svg><div class="flex-1"><h3 class="font-medium text-blue-900 dark:text-blue-100 mb-1">How to Interpret Test Results</h3><p class="text-sm text-blue-800 dark:text-blue-200">These tests validate basic code generation capabilities across different task types. A <strong>passing test</strong> means files were created/modified successfully. A <strong>failing test</strong> indicates the model couldn't complete the task or didn't produce expected outputs.</p><div class="mt-2 text-xs text-blue-700 dark:text-blue-300"><strong>Tip:</strong> Select your preferred provider and model below to test specific configurations. The generation output will show you what the AI is thinking during execution.</div></div></div></div><div class="bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-lg p-4 mb-6"><div class="flex items-start gap-3"><div class="text-amber-600 dark:text-amber-400 mt-0.5">💡</div><div class="flex-1"><h3 class="font-medium text-amber-900 dark:text-amber-100 mb-1">Cost Warning</h3><p class="text-sm text-amber-800 dark:text-amber-200">Running these tests can be <strong>very expensive</strong> and likely isn't necessary. It's cheaper and easier to just use good models and research community feedback about agentic capabilities.</p><p class="text-sm text-amber-800 dark:text-amber-200 mt-2">This tester is largely for evaluating how models perform with DeepStudio's implementation and using those results to improve the agentic system.</p></div></div></div><div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"><div class="bg-card border rounded-lg p-4"><div class="text-sm font-medium text-muted-foreground mb-1">Total Tests</div><div class="text-2xl font-bold">0</div></div><div class="bg-card border rounded-lg p-4"><div class="text-sm font-medium text-muted-foreground mb-1">Passed</div><div class="text-2xl font-bold text-green-600">0</div></div><div class="bg-card border rounded-lg p-4"><div class="text-sm font-medium text-muted-foreground mb-1">Failed</div><div class="text-2xl font-bold text-red-600">0</div></div><div class="bg-card border rounded-lg p-4"><div class="text-sm font-medium text-muted-foreground mb-1">Success Rate</div><div class="text-2xl font-bold">0.0<!-- -->%</div></div></div><div class="flex gap-4 mb-6"><button data-slot="popover-trigger" class="inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-full text-sm font-sans font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-«Rp3rlb»" data-state="closed"><span>Select Model</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up h-4 w-4 ml-2" aria-hidden="true"><path d="m18 15-6-6-6 6"></path></svg></button><button data-slot="button" class="inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-full text-sm font-sans font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 h-9 px-4 py-2 has-[>svg]:px-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play h-4 w-4 mr-2" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>Run Quick Tests (5 tests)</button><button data-slot="button" class="inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-full text-sm font-sans font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw h-4 w-4 mr-2" aria-hidden="true"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></svg>Reset</button></div><div class="grid gap-4"><div class="bg-card border rounded-lg p-4"><div class="flex items-center justify-between mb-2"><div><div class="flex items-center gap-2 font-medium"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-4 w-4 text-gray-400" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>Add hamburger menu to navbar<span class="text-sm font-normal text-muted-foreground">(<!-- -->ui<!-- -->)</span></div><div class="text-sm text-muted-foreground mt-1">Add a mobile hamburger menu to the navbar. The hamburger should appear on screens smaller than 768px<!-- -->...</div></div><div class="flex items-center gap-2"><button data-slot="button" class="inline-flex items-center cursor-pointer justify-center whitespace-nowrap font-sans font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-full text-[13px] gap-1.5 px-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play h-3 w-3 mr-1" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>Test</button></div></div></div><div class="bg-card border rounded-lg p-4"><div class="flex items-center justify-between mb-2"><div><div class="flex items-center gap-2 font-medium"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-4 w-4 text-gray-400" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>Create modal dialog<span class="text-sm font-normal text-muted-foreground">(<!-- -->ui<!-- -->)</span></div><div class="text-sm text-muted-foreground mt-1">Create a modal dialog that can be opened with a button click. The modal should have a close button a<!-- -->...</div></div><div class="flex items-center gap-2"><button data-slot="button" class="inline-flex items-center cursor-pointer justify-center whitespace-nowrap font-sans font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-full text-[13px] gap-1.5 px-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play h-3 w-3 mr-1" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>Test</button></div></div></div><div class="bg-card border rounded-lg p-4"><div class="flex items-center justify-between mb-2"><div><div class="flex items-center gap-2 font-medium"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-4 w-4 text-gray-400" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>Add contact form with validation<span class="text-sm font-normal text-muted-foreground">(<!-- -->ui<!-- -->)</span></div><div class="text-sm text-muted-foreground mt-1">Add a contact form with fields for name, email, and message. Include client-side validation for requ<!-- -->...</div></div><div class="flex items-center gap-2"><button data-slot="button" class="inline-flex items-center cursor-pointer justify-center whitespace-nowrap font-sans font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-full text-[13px] gap-1.5 px-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play h-3 w-3 mr-1" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>Test</button></div></div></div><div class="bg-card border rounded-lg p-4"><div class="flex items-center justify-between mb-2"><div><div class="flex items-center gap-2 font-medium"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-4 w-4 text-gray-400" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>Create dropdown menu<span class="text-sm font-normal text-muted-foreground">(<!-- -->ui<!-- -->)</span></div><div class="text-sm text-muted-foreground mt-1">Create a dropdown menu for the navigation. When hovering over "Services" link, show a dropdown with <!-- -->...</div></div><div class="flex items-center gap-2"><button data-slot="button" class="inline-flex items-center cursor-pointer justify-center whitespace-nowrap font-sans font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-full text-[13px] gap-1.5 px-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play h-3 w-3 mr-1" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>Test</button></div></div></div><div class="bg-card border rounded-lg p-4"><div class="flex items-center justify-between mb-2"><div><div class="flex items-center gap-2 font-medium"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-4 w-4 text-gray-400" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>Create image carousel<span class="text-sm font-normal text-muted-foreground">(<!-- -->ui<!-- -->)</span></div><div class="text-sm text-muted-foreground mt-1">Create an image carousel/slider with next and previous buttons. It should display one image at a tim<!-- -->...</div></div><div class="flex items-center gap-2"><button data-slot="button" class="inline-flex items-center cursor-pointer justify-center whitespace-nowrap font-sans font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-full text-[13px] gap-1.5 px-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play h-3 w-3 mr-1" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>Test</button></div></div></div><div class="bg-card border rounded-lg p-4"><div class="flex items-center justify-between mb-2"><div><div class="flex items-center gap-2 font-medium"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-4 w-4 text-gray-400" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>Change background to gradient<span class="text-sm font-normal text-muted-foreground">(<!-- -->style<!-- -->)</span></div><div class="text-sm text-muted-foreground mt-1">Change the body background to a linear gradient from #ff8c42 to #e65100<!-- -->...</div></div><div class="flex items-center gap-2"><button data-slot="button" class="inline-flex items-center cursor-pointer justify-center whitespace-nowrap font-sans font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-full text-[13px] gap-1.5 px-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play h-3 w-3 mr-1" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>Test</button></div></div></div><div class="bg-card border rounded-lg p-4"><div class="flex items-center justify-between mb-2"><div><div class="flex items-center gap-2 font-medium"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-4 w-4 text-gray-400" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>Add dark mode toggle<span class="text-sm font-normal text-muted-foreground">(<!-- -->style<!-- -->)</span></div><div class="text-sm text-muted-foreground mt-1">Add a dark mode toggle button that switches the entire page between light and dark themes. Store the<!-- -->...</div></div><div class="flex items-center gap-2"><button data-slot="button" class="inline-flex items-center cursor-pointer justify-center whitespace-nowrap font-sans font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-full text-[13px] gap-1.5 px-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play h-3 w-3 mr-1" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>Test</button></div></div></div><div class="bg-card border rounded-lg p-4"><div class="flex items-center justify-between mb-2"><div><div class="flex items-center gap-2 font-medium"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-4 w-4 text-gray-400" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>Create responsive grid layout<span class="text-sm font-normal text-muted-foreground">(<!-- -->style<!-- -->)</span></div><div class="text-sm text-muted-foreground mt-1">Create a responsive grid layout with 3 columns on desktop, 2 on tablet, and 1 on mobile. Add 6 card <!-- -->...</div></div><div class="flex items-center gap-2"><button data-slot="button" class="inline-flex items-center cursor-pointer justify-center whitespace-nowrap font-sans font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-full text-[13px] gap-1.5 px-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play h-3 w-3 mr-1" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>Test</button></div></div></div><div class="bg-card border rounded-lg p-4"><div class="flex items-center justify-between mb-2"><div><div class="flex items-center gap-2 font-medium"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-4 w-4 text-gray-400" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>Add API fetch functionality<span class="text-sm font-normal text-muted-foreground">(<!-- -->javascript<!-- -->)</span></div><div class="text-sm text-muted-foreground mt-1">Add a button that fetches data from https://jsonplaceholder.typicode.com/users and displays the user<!-- -->...</div></div><div class="flex items-center gap-2"><button data-slot="button" class="inline-flex items-center cursor-pointer justify-center whitespace-nowrap font-sans font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-full text-[13px] gap-1.5 px-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play h-3 w-3 mr-1" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>Test</button></div></div></div><div class="bg-card border rounded-lg p-4"><div class="flex items-center justify-between mb-2"><div><div class="flex items-center gap-2 font-medium"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-4 w-4 text-gray-400" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>Create countdown timer<span class="text-sm font-normal text-muted-foreground">(<!-- -->javascript<!-- -->)</span></div><div class="text-sm text-muted-foreground mt-1">Create a countdown timer that counts down from 60 seconds and displays the remaining time. Include s<!-- -->...</div></div><div class="flex items-center gap-2"><button data-slot="button" class="inline-flex items-center cursor-pointer justify-center whitespace-nowrap font-sans font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-full text-[13px] gap-1.5 px-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play h-3 w-3 mr-1" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>Test</button></div></div></div><div class="bg-card border rounded-lg p-4"><div class="flex items-center justify-between mb-2"><div><div class="flex items-center gap-2 font-medium"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-4 w-4 text-gray-400" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>Build a todo list application<span class="text-sm font-normal text-muted-foreground">(<!-- -->complex<!-- -->)</span></div><div class="text-sm text-muted-foreground mt-1">Build a todo list application with the ability to add tasks, mark them as complete, delete tasks, an<!-- -->...</div></div><div class="flex items-center gap-2"><button data-slot="button" class="inline-flex items-center cursor-pointer justify-center whitespace-nowrap font-sans font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-full text-[13px] gap-1.5 px-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play h-3 w-3 mr-1" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>Test</button></div></div></div></div></div></div></div><!--$--><!--/$--><!--$--><!--/$--><script src="/_next/static/chunks/webpack-5d4f0cacdd7dc40f.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[1321,[\"486\",\"static/chunks/486-c1c1009c9354e890.js\",\"83\",\"static/chunks/83-70dc4fb967061d37.js\",\"177\",\"static/chunks/app/layout-185f21d645185bb1.js\"],\"ThemeProvider\"]\n3:I[5851,[\"486\",\"static/chunks/486-c1c1009c9354e890.js\",\"83\",\"static/chunks/83-70dc4fb967061d37.js\",\"177\",\"static/chunks/app/layout-185f21d645185bb1.js\"],\"Toaster\"]\n4:I[5388,[\"486\",\"static/chunks/486-c1c1009c9354e890.js\",\"83\",\"static/chunks/83-70dc4fb967061d37.js\",\"177\",\"static/chunks/app/layout-185f21d645185bb1.js\"],\"default\"]\n5:I[7555,[],\"\"]\n6:I[1295,[],\"\"]\n7:I[894,[],\"ClientPageRoot\"]\n8:I[8724,[\"948\",\"static/chunks/06bf0ff1-f728958255a9b8b2.js\",\"486\",\"static/chunks/486-c1c1009c9354e890.js\",\"478\",\"static/chunks/478-6d6523bbc22b7910.js\",\"835\",\"static/chunks/835-8df0fce1a9c59183.js\",\"932\",\"static/chunks/app/test-generation/page-2ee26d4a80208621.js\"],\"default\"]\nb:I[9665,[],\"MetadataBoundary\"]\nd:I[9665,[],\"OutletBoundary\"]\n10:I[4911,[],\"AsyncMetadataOutlet\"]\n12:I[9665,[],\"ViewportBoundary\"]\n14:I[6614,[],\"\"]\n:HL[\"/_next/static/media/58f662ed5ba12a72-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/c3f6eb667c0186c5-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/e4af272ccee01ff0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/cd0b83e1150c7a83.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"l-4ilrhVV-hiEu9V5XPbm\",\"p\":\"\",\"c\":[\"\",\"test-generation\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"test-generation\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/cd0b83e1150c7a83.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"className\":\"__variable_f367f3 __variable_438d47 antialiased bg-background h-[100dvh] overflow-hidden\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"$L2\",null,{\"children\":[[\"$\",\"$L3\",null,{\"richColors\":true,\"position\":\"bottom-center\"}],[\"$\",\"$L4\",null,{\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]]}]}]}]]}],{\"children\":[\"test-generation\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L7\",null,{\"Component\":\"$8\",\"searchParams\":{},\"params\":{},\"promises\":[\"$@9\",\"$@a\"]}],[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],null,[\"$\",\"$Ld\",null,{\"children\":[\"$Le\",\"$Lf\",[\"$\",\"$L10\",null,{\"promise\":\"$@11\"}]]}]]}],{},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"qUSawEgU0gwB_Ifj1lINC\",{\"children\":[[\"$\",\"$L12\",null,{\"children\":\"$L13\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],null]}],false]],\"m\":\"$undefined\",\"G\":[\"$14\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"15:\"$Sreact.suspense\"\n16:I[4911,[],\"AsyncMetadata\"]\n9:{}\na:{}\nc:[\"$\",\"$15\",null,{\"fallback\":null,\"children\":[\"$\",\"$L16\",null,{\"promise\":\"$@17\"}]}]\n"])</script><script>self.__next_f.push([1,"f:null\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1, maximum-scale=1\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"content\":\"#000000\"}]]\ne:null\n"])</script><script>self.__next_f.push([1,"17:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"DeepStudio | Agentic AI Development 🎨\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"DeepStudio is an AI-powered development environment that enables autonomous multi-file development through intelligent tool usage. Build complete applications with natural language.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",\"3\",{\"name\":\"apple-mobile-web-app-title\",\"content\":\"DeepStudio\"}],[\"$\",\"meta\",\"4\",{\"name\":\"apple-mobile-web-app-status-bar-style\",\"content\":\"black-translucent\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:title\",\"content\":\"DeepStudio | Agentic AI Development 🎨\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:description\",\"content\":\"DeepStudio is an AI-powered development environment that enables autonomous multi-file development through intelligent tool usage. Build complete applications with natural language.\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:url\",\"content\":\"https://huggingface.co/spaces/otst/deepstudio\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:site_name\",\"content\":\"DeepStudio\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:image\",\"content\":\"https://huggingface.co/spaces/otst/deepstudio/resolve/main/banner.png\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image:alt\",\"content\":\"DeepStudio Open Graph Image\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:title\",\"content\":\"DeepStudio | Agentic AI Development 🎨\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:description\",\"content\":\"DeepStudio is an AI-powered development environment that enables autonomous multi-file development through intelligent tool usage. Build complete applications with natural language.\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:image\",\"content\":\"https://huggingface.co/spaces/otst/deepstudio/resolve/main/banner.png\"}],[\"$\",\"link\",\"17\",{\"rel\":\"shortcut icon\",\"href\":\"/deepstudio-logo-dark.svg\"}],[\"$\",\"link\",\"18\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}],[\"$\",\"link\",\"19\",{\"rel\":\"icon\",\"href\":\"/deepstudio-logo-dark.svg\"}],[\"$\",\"link\",\"20\",{\"rel\":\"apple-touch-icon\",\"href\":\"/deepstudio-logo-dark.svg\"}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script><script>self.__next_f.push([1,"11:{\"metadata\":\"$17:metadata\",\"error\":null,\"digest\":\"$undefined\"}\n"])</script></body></html> |