Spaces:

kalhdrawi
/

omnidev

Running

App Files Files

kalhdrawi commited on 18 days ago

Commit

c89a5a0

1 Parent(s): 72eb26e

Reupload OmniDev clean version

Browse files

Files changed (6) hide show

app/api/augment/route.ts +1 -1
app/api/me/projects/[namespace]/[repoId]/file/route.ts +29 -0
app/api/me/projects/[namespace]/[repoId]/files/route.ts +29 -0
app/api/me/projects/route.ts +2 -1
components/editor/files-explorer/index.tsx +116 -0
components/editor/index.tsx +4 -0

app/api/augment/route.ts CHANGED Viewed

@@ -254,7 +254,7 @@ export async function POST(req: NextRequest) {
 function generateFallbackFiles(framework: string, language: string, title: string): FileUpdate[] {
   const isTs = language.toLowerCase().includes('ts');
   if (framework?.startsWith('express')) {
-    const server = `import express from 'express';\nimport cors from 'cors';\nconst app = express();\napp.use(cors());\napp.get('/', (_, res) => res.send('OK'));\napp.get('/health', (_, res) => res.json({ ok: true }));\nconst PORT = process.env.PORT || 3000;\napp.listen(PORT, () => console.log('Server listening on', PORT));\n`;
     const indexHtml = `<!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>${title}</title>\n<script src=\"https://cdn.tailwindcss.com\"></script>\n</head>\n<body class=\"bg-neutral-950 text-white\">\n<div id=\"root\"></div>\n<script type=\"module\" src=\"/src/main.${isTs ? 'tsx' : 'jsx'}\"></script>\n</body>\n</html>`;
     const main = `import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport App from './App';\ncreateRoot(document.getElementById('root')).render(<App />);\n`;
     const app = `export default function App(){\n  return (<main className=\"min-h-screen grid place-content-center\">\n    <h1 className=\"text-3xl font-bold\">${title}</h1>\n    <p className=\"text-neutral-400\">Frontend + Backend scaffolded by OmniDev</p>\n  </main>);\n}\n`;

 function generateFallbackFiles(framework: string, language: string, title: string): FileUpdate[] {
   const isTs = language.toLowerCase().includes('ts');
   if (framework?.startsWith('express')) {
+    const server = `import express from 'express';\nimport cors from 'cors';\nimport path from 'path';\nimport { fileURLToPath } from 'url';\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\nconst app = express();\napp.use(cors());\nconst distPath = path.join(__dirname, '..', 'frontend', 'dist');\napp.use(express.static(distPath));\napp.get('/health', (_, res) => res.json({ ok: true }));\napp.get('*', (req, res) => { try { res.sendFile(path.join(distPath, 'index.html')); } catch { res.send('OK'); } });\nconst PORT = process.env.PORT || 3000;\napp.listen(PORT, () => console.log('Server listening on', PORT));\n`;
     const indexHtml = `<!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>${title}</title>\n<script src=\"https://cdn.tailwindcss.com\"></script>\n</head>\n<body class=\"bg-neutral-950 text-white\">\n<div id=\"root\"></div>\n<script type=\"module\" src=\"/src/main.${isTs ? 'tsx' : 'jsx'}\"></script>\n</body>\n</html>`;
     const main = `import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport App from './App';\ncreateRoot(document.getElementById('root')).render(<App />);\n`;
     const app = `export default function App(){\n  return (<main className=\"min-h-screen grid place-content-center\">\n    <h1 className=\"text-3xl font-bold\">${title}</h1>\n    <p className=\"text-neutral-400\">Frontend + Backend scaffolded by OmniDev</p>\n  </main>);\n}\n`;

app/api/me/projects/[namespace]/[repoId]/file/route.ts ADDED Viewed

	@@ -0,0 +1,29 @@

+import { NextRequest, NextResponse } from "next/server";
+import { downloadFile, spaceInfo } from "@huggingface/hub";
+import { isAuthenticated } from "@/lib/auth";
+export async function GET(
+  req: NextRequest,
+  { params }: { params: Promise<{ namespace: string; repoId: string }> }
+) {
+  const user = await isAuthenticated();
+  if (!user || user instanceof NextResponse) {
+    return NextResponse.json({ ok: false, error: "Unauthorized" }, { status: 401 });
+  }
+  const { namespace, repoId } = await params;
+  const path = req.nextUrl.searchParams.get('path');
+  if (!path) return NextResponse.json({ ok: false, error: 'Missing path' }, { status: 400 });
+  try {
+    const space = await spaceInfo({ name: `${namespace}/${repoId}`, accessToken: user.token as string });
+    if (!space) return NextResponse.json({ ok: false, error: "Space not found" }, { status: 404 });
+    const blob = await downloadFile({ repo: { type: 'space', name: `${namespace}/${repoId}` }, accessToken: user.token as string, path, raw: true });
+    if (!blob) return NextResponse.json({ ok: false, error: 'File not found' }, { status: 404 });
+    const text = await blob.text();
+    return NextResponse.json({ ok: true, path, content: text });
+  } catch (e: any) {
+    return NextResponse.json({ ok: false, error: e?.message || 'Failed to fetch file' }, { status: 500 });
+  }
+}

app/api/me/projects/[namespace]/[repoId]/files/route.ts ADDED Viewed

	@@ -0,0 +1,29 @@

+import { NextRequest, NextResponse } from "next/server";
+import { listFiles, spaceInfo } from "@huggingface/hub";
+import { isAuthenticated } from "@/lib/auth";
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ namespace: string; repoId: string }> }
+) {
+  const user = await isAuthenticated();
+  if (!user || user instanceof NextResponse) {
+    return NextResponse.json({ ok: false, error: "Unauthorized" }, { status: 401 });
+  }
+  const { namespace, repoId } = await params;
+  try {
+    const space = await spaceInfo({ name: `${namespace}/${repoId}`, accessToken: user.token as string });
+    if (!space) return NextResponse.json({ ok: false, error: "Space not found" }, { status: 404 });
+    const paths: { path: string; type: string }[] = [];
+    for await (const entry of listFiles({ repo: { type: 'space', name: `${namespace}/${repoId}` }, accessToken: user.token as string })) {
+      if (entry.path.startsWith(".git")) continue;
+      paths.push({ path: entry.path, type: entry.type });
+    }
+    return NextResponse.json({ ok: true, paths });
+  } catch (e: any) {
+    return NextResponse.json({ ok: false, error: e?.message || 'Failed to list files' }, { status: 500 });
+  }
+}

app/api/me/projects/route.ts CHANGED Viewed

@@ -41,7 +41,7 @@ title: ${title}
 colorFrom: ${colorFrom}
 colorTo: ${colorTo}
 emoji: 🐳
-sdk: static
 pinned: false
 tags:
   - deepsite-v3
@@ -119,3 +119,4 @@ This project was created with [DeepSite](https://deepsite.hf.co).
     );
   }
 }

 colorFrom: ${colorFrom}
 colorTo: ${colorTo}
 emoji: 🐳
+sdk: docker
 pinned: false
 tags:
   - deepsite-v3
     );
   }
 }

components/editor/files-explorer/index.tsx ADDED Viewed

	@@ -0,0 +1,116 @@

+"use client";
+import { useEffect, useMemo, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import Editor from "@monaco-editor/react";
+import { useEditor } from "@/hooks/useEditor";
+const TEXT_EXT = ["js","ts","tsx","jsx","json","md","css","html","txt","mjs","cjs","tsconfig","eslintrc","prettierrc"];
+function isTextFile(path: string) {
+  const ext = (path.split('.').pop() || '').toLowerCase();
+  return TEXT_EXT.includes(ext) || path.endsWith('.d.ts');
+}
+export function FilesExplorerButton() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button size="xs" variant="outline" className="!rounded-md" onClick={() => setOpen(true)}>Files</Button>
+      {open && <FilesExplorer open={open} onClose={() => setOpen(false)} />}
+    </>
+  );
+}
+function FilesExplorer({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const { project } = useEditor();
+  const space = project?.space_id || '';
+  const [namespace, repoId] = space.split('/');
+  const [paths, setPaths] = useState<{ path: string; type: string }[]>([]);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [content, setContent] = useState<string>('');
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const canSave = useMemo(() => !!selected && isTextFile(selected!), [selected]);
+  useEffect(() => {
+    (async () => {
+      if (!namespace || !repoId) return;
+      const res = await fetch(`/api/me/projects/${namespace}/${repoId}/files`);
+      const data = await res.json();
+      if (data?.ok) setPaths(data.paths || []);
+    })();
+  }, [namespace, repoId]);
+  const openFile = async (p: string) => {
+    setSelected(p);
+    setContent('');
+    setLoading(true);
+    try {
+      if (isTextFile(p)) {
+        const res = await fetch(`/api/me/projects/${namespace}/${repoId}/file?path=${encodeURIComponent(p)}`);
+        const data = await res.json();
+        if (data?.ok) setContent(data.content || '');
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  const saveFile = async () => {
+    if (!selected) return;
+    setSaving(true);
+    try {
+      const res = await fetch(`/api/me/projects/${namespace}/${repoId}/apply`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ files: [{ path: selected, action: 'update', content }], commitTitle: `Edit ${selected}` })
+      });
+      await res.json();
+    } finally {
+      setSaving(false);
+    }
+  };
+  return (
+    <Dialog open={open} onOpenChange={() => onClose()}>
+      <DialogContent className="sm:max-w-5xl !bg-neutral-900 !border-neutral-800">
+        <DialogHeader>
+          <DialogTitle className="text-neutral-100">Project Files</DialogTitle>
+        </DialogHeader>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3 min-h-[420px]">
+          <div className="border border-neutral-800 rounded-lg p-2 overflow-y-auto">
+            <ul className="text-sm text-neutral-300">
+              {paths.map(p => (
+                <li key={p.path} className="py-1 px-2 rounded hover:bg-neutral-800 cursor-pointer" onClick={() => openFile(p.path)}>
+                  {p.path}
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="md:col-span-2 border border-neutral-800 rounded-lg overflow-hidden relative">
+            {!selected && <div className="p-4 text-neutral-400 text-sm">Select a file to preview/edit</div>}
+            {selected && isTextFile(selected) && (
+              <Editor
+                defaultLanguage="plaintext"
+                theme="vs-dark"
+                value={content}
+                loading={<div className="p-4 text-neutral-400 text-sm">{loading ? 'Loading…' : ''}</div>}
+                onChange={(v) => setContent(v || '')}
+                options={{ minimap: { enabled: false }, wordWrap: 'on' }}
+              />
+            )}
+            {selected && !isTextFile(selected) && (
+              <div className="p-4 text-neutral-400 text-sm">Binary/non-text file. Download/edit locally if needed.</div>
+            )}
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="bordered" size="sm" onClick={() => onClose()}>Close</Button>
+          <Button size="sm" onClick={saveFile} disabled={!canSave || saving}>{saving ? 'Saving…' : 'Save File'}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

components/editor/index.tsx CHANGED Viewed

@@ -18,6 +18,7 @@ import { Preview } from "./preview";
 import { SaveChangesPopup } from "./save-changes-popup";
 import Loading from "../loading";
 import { Page } from "@/types";
 export const AppEditor = ({
   namespace,
@@ -78,6 +79,9 @@ export const AppEditor = ({
           )}
         >
           <ListPages />
           <CopyIcon
             className="size-4 absolute top-14 right-5 text-neutral-500 hover:text-neutral-300 z-2 cursor-pointer"
             onClick={() => {

 import { SaveChangesPopup } from "./save-changes-popup";
 import Loading from "../loading";
 import { Page } from "@/types";
+import { FilesExplorerButton } from "@/components/editor/files-explorer";
 export const AppEditor = ({
   namespace,
           )}
         >
           <ListPages />
+          <div className="absolute top-12 left-3 z-10">
+            <FilesExplorerButton />
+          </div>
           <CopyIcon
             className="size-4 absolute top-14 right-5 text-neutral-500 hover:text-neutral-300 z-2 cursor-pointer"
             onClick={() => {