ugly-app 0.1.19 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugly-app",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "type": "module",
   "main": "./dist/server/index.js",
   "exports": {

package/templates/client/App.tsx

@@ -3,6 +3,7 @@ import type { AppSocket } from 'ugly-app/client';
 import { FeedbackButton } from 'ugly-app/client';
 import type { RouterState } from 'ugly-app/shared';
 import type { AppRegistry } from '../shared/api';
+import { AITestPage } from './pages/AITestPage';
 import { AuthDemoPage } from './pages/AuthDemoPage';
 import { HomePage } from './pages/HomePage';
 import { SearchPage } from './pages/SearchPage';
@@ -15,14 +16,11 @@ interface AppProps {
 
 function renderPage(state: RouterState): React.ReactNode {
   switch (state.routeName) {
-    case 'auth-demo':
-      return <AuthDemoPage />;
-    case 'user/:userId':
-      return <UserPage userId={state.params.userId ?? ''} />;
-    case 'search':
-      return <SearchPage />;
-    default:
-      return <HomePage />;
+    case 'auth-demo': return <AuthDemoPage />;
+    case 'user/:userId': return <UserPage userId={state.params.userId ?? ''} />;
+    case 'search': return <SearchPage />;
+    case 'ai-test': return <AITestPage />;
+    default: return <HomePage />;
   }
 }
 

package/templates/client/pages/AITestPage.tsx

@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+import { Button, Card, Input, PageLayout, Text } from 'ugly-app/client';
+import { imageGenProviderModels, textGenProviderModels } from 'ugly-app/shared';
+
+type Mode = 'text' | 'image';
+
+const UGLY_BOT_URL = import.meta.env.VITE_UGLY_BOT_URL ?? 'https://ugly.bot';
+
+async function callUglyBot(op: string, input: unknown): Promise<unknown> {
+  const token = (window as unknown as { __AUTH_TOKEN__?: string }).__AUTH_TOKEN__;
+  const res = await fetch(`${UGLY_BOT_URL}/request`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${token ?? ''}`,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ op, input, sessionId: 'ai-test' }),
+  });
+  if (!res.ok) {
+    const body = await res.text().catch(() => '');
+    throw new Error(`${res.status}: ${body}`);
+  }
+  const data = (await res.json()) as { result: unknown };
+  return data.result;
+}
+
+export function AITestPage(): React.ReactElement {
+  const [mode, setMode] = useState<Mode>('text');
+  const [prompt, setPrompt] = useState('');
+  const [textModel, setTextModel] = useState(textGenProviderModels[0] ?? '');
+  const [imageModel, setImageModel] = useState(imageGenProviderModels[0] ?? '');
+  const [result, setResult] = useState('');
+  const [imageUrl, setImageUrl] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  async function handleRun(): Promise<void> {
+    if (!prompt.trim()) return;
+    setLoading(true);
+    setError('');
+    setResult('');
+    setImageUrl('');
+    try {
+      if (mode === 'text') {
+        const text = await callUglyBot('textGen', {
+          messages: [{ role: 'user', content: prompt }],
+          options: { provider: textModel },
+        });
+        setResult(String(text));
+      } else {
+        const url = await callUglyBot('imageGen', {
+          prompt,
+          options: { provider: imageModel },
+        });
+        setImageUrl(String(url));
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const model = mode === 'text' ? textModel : imageModel;
+  const models = mode === 'text' ? textGenProviderModels : imageGenProviderModels;
+
+  return (
+    <PageLayout
+      header={
+        <div className="px-6 py-4">
+          <a href="/" className="text-blue-600">← Home</a>
+        </div>
+      }
+    >
+      <div className="max-w-2xl mx-auto">
+        <Text size="xl" weight="bold">AI Model Test</Text>
+
+        <div className="mt-4 flex gap-2">
+          <Button
+            variant={mode === 'text' ? 'primary' : 'secondary'}
+            onClick={() => setMode('text')}
+          >
+            Text
+          </Button>
+          <Button
+            variant={mode === 'image' ? 'primary' : 'secondary'}
+            onClick={() => setMode('image')}
+          >
+            Image
+          </Button>
+        </div>
+
+        <Card className="mt-4">
+          <div className="space-y-4">
+            <div>
+              <Text size="sm" weight="medium" className="mb-1">Model</Text>
+              <select
+                value={model}
+                onChange={(e) => mode === 'text' ? setTextModel(e.target.value) : setImageModel(e.target.value)}
+                className="w-full border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 text-sm bg-white dark:bg-gray-800"
+              >
+                {models.map((m) => (
+                  <option key={m} value={m}>{m}</option>
+                ))}
+              </select>
+            </div>
+
+            <Input
+              label="Prompt"
+              value={prompt}
+              onChange={setPrompt}
+              placeholder={mode === 'text' ? 'Ask something...' : 'Describe an image...'}
+            />
+
+            <Button onClick={handleRun} disabled={loading || !prompt.trim()}>
+              {loading ? 'Running...' : 'Run'}
+            </Button>
+          </div>
+        </Card>
+
+        {error && (
+          <Card className="mt-4 border-red-300">
+            <Text size="sm" className="text-red-600">{error}</Text>
+          </Card>
+        )}
+
+        {result && (
+          <Card className="mt-4">
+            <Text size="sm" weight="medium" className="mb-2">Result</Text>
+            <pre className="text-sm whitespace-pre-wrap break-words bg-gray-50 dark:bg-gray-900 p-3 rounded">
+              {result}
+            </pre>
+          </Card>
+        )}
+
+        {imageUrl && (
+          <Card className="mt-4">
+            <Text size="sm" weight="medium" className="mb-2">Result</Text>
+            <img src={imageUrl} alt="Generated" className="w-full rounded" />
+          </Card>
+        )}
+      </div>
+    </PageLayout>
+  );
+}

package/templates/client/pages/HomePage.tsx

@@ -98,6 +98,14 @@ function HomePageBody({
             </Text>
           </Card>
         </a>
+        <a href="/ai-test" className="block">
+          <Card className="hover:shadow-md transition-shadow cursor-pointer">
+            <Text weight="medium">AI Model Test →</Text>
+            <Text size="sm" className="text-gray-500 mt-1">
+              Test text & image generation models
+            </Text>
+          </Card>
+        </a>
       </div>
     </div>
   );

package/templates/server/index.ts

@@ -1,12 +1,5 @@
-import {
-  createApp,
-  createUserHelper,
-  imageGenCreate,
-  registerFeedbackHandlers,
-  textGenCreate,
-} from 'ugly-app';
+import { createApp, createUserHelper, registerFeedbackHandlers } from 'ugly-app';
 import { dbDefaults } from 'ugly-app/shared';
-import type { ImageGenModelProvider, TextGenModelProvider } from 'ugly-app/shared';
 import { functions, requests } from '../shared/api';
 import { collections } from '../shared/collections';
 import { pages } from '../shared/pages';
@@ -25,22 +18,6 @@ const app = createApp({ functions, requests }, collections, (configurator) => {
 const maintainBotUserId = process.env.MAINTAIN_BOT_USER_ID ?? '';
 registerFeedbackHandlers(app, maintainBotUserId);
 
-// Register function handlers
-app.registerFunction('testTextGen', async (_ctx, input) => {
-  const { prompt, model } = input as { prompt: string; model: string };
-  const textGen = textGenCreate(model as TextGenModelProvider);
-  const response = await textGen.complete({ prompt }, null);
-  return { result: response?.text ?? '' };
-});
-
-app.registerFunction('testImageGen', async (_ctx, input) => {
-  const { prompt, model } = input as { prompt: string; model: string };
-  const imageGen = imageGenCreate(model as ImageGenModelProvider);
-  const result = await imageGen.generate({ prompt, negativePrompt: '', size: 'square', allowSexual: false, images: [] });
-  const imageUrl = result ? `data:${result.mime ?? 'image/jpeg'};base64,${result.base64}` : '';
-  return { imageUrl };
-});
-
 // Register request handlers
 app.registerRequest('getMe', async (ctx) => {
   const user = await userHelper.get(ctx.db, ctx.userId);

package/templates/shared/api.ts

@@ -10,20 +10,6 @@ export const functions = defineFunctions({
     }),
     output: z.object({ ok: z.boolean() }),
   }),
-  testTextGen: fn({
-    input: z.object({
-      prompt: z.string().min(1).max(2000),
-      model: z.string(),
-    }),
-    output: z.object({ result: z.string() }),
-  }),
-  testImageGen: fn({
-    input: z.object({
-      prompt: z.string().min(1).max(500),
-      model: z.string(),
-    }),
-    output: z.object({ imageUrl: z.string() }),
-  }),
 });
 
 export const requests = defineRequests({