Add UX Designer Prompt feature and update Ollama models

- Add comprehensive Ollama Cloud API models list - Add generateUXDesignerPrompt method to OllamaCloudService - Add generateUXDesignerPrompt method to ZaiPlanService - Add generateUXDesignerPrompt to ModelAdapter - Create UXDesignerPrompt component with detailed prompt generation - Add UX Designer Prompt view to Sidebar - Update page.tsx to render UXDesignerPrompt component
2025-12-25 22:17:15 +04:00
parent 0c828461e4
commit f510683e18
6 changed files with 424 additions and 95 deletions
--- a/lib/services/model-adapter.ts
+++ b/lib/services/model-adapter.ts
@@ -1,13 +1,8 @@
 import type { ModelProvider, APIResponse, ChatMessage } from "@/types";
-import QwenOAuthService from "./qwen-oauth";
 import OllamaCloudService from "./ollama-cloud";
 import ZaiPlanService from "./zai-plan";

 export interface ModelAdapterConfig {
-  qwen?: {
-    apiKey?: string;
-    endpoint?: string;
-  };
  ollama?: {
    apiKey?: string;
    endpoint?: string;
@@ -20,13 +15,11 @@ export interface ModelAdapterConfig {
 }

 export class ModelAdapter {
-  private qwenService: QwenOAuthService;
  private ollamaService: OllamaCloudService;
  private zaiService: ZaiPlanService;
  private preferredProvider: ModelProvider;

-  constructor(config: ModelAdapterConfig = {}, preferredProvider: ModelProvider = "qwen") {
-    this.qwenService = new QwenOAuthService(config.qwen);
+  constructor(config: ModelAdapterConfig = {}, preferredProvider: ModelProvider = "ollama") {
    this.ollamaService = new OllamaCloudService(config.ollama);
    this.zaiService = new ZaiPlanService(config.zai);
    this.preferredProvider = preferredProvider;
@@ -36,18 +29,6 @@ export class ModelAdapter {
    this.preferredProvider = provider;
  }

-  updateQwenApiKey(apiKey: string): void {
-    this.qwenService = new QwenOAuthService({ apiKey });
-  }
-
-  setQwenOAuthTokens(accessToken: string, refreshToken?: string, expiresIn?: number): void {
-    this.qwenService.setOAuthTokens(accessToken, refreshToken, expiresIn);
-  }
-
-  getQwenAuthUrl(): string {
-    return this.qwenService.getAuthorizationUrl();
-  }
-
  updateOllamaApiKey(apiKey: string): void {
    this.ollamaService = new OllamaCloudService({ apiKey });
  }
@@ -65,9 +46,6 @@ export class ModelAdapter {
        let service: any;

        switch (provider) {
-          case "qwen":
-            service = this.qwenService;
-            break;
          case "ollama":
            service = this.ollamaService;
            break;
@@ -106,6 +84,11 @@ export class ModelAdapter {
    return this.callWithFallback((service) => service.generateActionPlan(prd, model), providers);
  }

+  async generateUXDesignerPrompt(appDescription: string, provider?: ModelProvider, model?: string): Promise<APIResponse<string>> {
+    const providers: ModelProvider[] = provider ? [provider] : [this.preferredProvider, "ollama", "zai"];
+    return this.callWithFallback((service) => service.generateUXDesignerPrompt(appDescription, model), providers);
+  }
+
  async chatCompletion(
    messages: ChatMessage[],
    model: string,
@@ -115,9 +98,6 @@ export class ModelAdapter {
      let service: any;

      switch (provider) {
-        case "qwen":
-          service = this.qwenService;
-          break;
        case "ollama":
          service = this.ollamaService;
          break;
@@ -137,7 +117,6 @@ export class ModelAdapter {

  async listModels(provider?: ModelProvider): Promise<APIResponse<Record<ModelProvider, string[]>>> {
    const fallbackModels: Record<ModelProvider, string[]> = {
-      qwen: ["qwen-coder-plus", "qwen-coder-turbo", "qwen-coder-lite"],
      ollama: ["gpt-oss:120b", "llama3.1", "gemma3", "deepseek-r1", "qwen3"],
      zai: ["glm-4.7", "glm-4.5", "glm-4.5-air", "glm-4-flash", "glm-4-flashx"],
    };
@@ -163,24 +142,12 @@ export class ModelAdapter {
        console.error("[ModelAdapter] Failed to load Z.AI models, using fallback:", error);
      }
    }
-    if (provider === "qwen" || !provider) {
-      try {
-        const qwenModels = await this.qwenService.listModels();
-        if (qwenModels.success && qwenModels.data && qwenModels.data.length > 0) {
-          models.qwen = qwenModels.data;
-        }
-      } catch (error) {
-        console.error("[ModelAdapter] Failed to load Qwen models, using fallback:", error);
-      }
-    }

    return { success: true, data: models };
  }

  getAvailableModels(provider: ModelProvider): string[] {
    switch (provider) {
-      case "qwen":
-        return this.qwenService.getAvailableModels();
      case "ollama":
        return this.ollamaService.getAvailableModels();
      case "zai":
--- a/lib/services/ollama-cloud.ts
+++ b/lib/services/ollama-cloud.ts
@@ -119,9 +119,44 @@ export class OllamaCloudService {
  }

  getAvailableModels(): string[] {
-    return this.availableModels.length > 0 
-      ? this.availableModels 
-      : ["gpt-oss:120b", "llama3.1", "gemma3", "deepseek-r1", "qwen3"];
+    if (this.availableModels.length > 0) {
+      return this.availableModels;
+    }
+    
+    return [
+      "gpt-oss:120b",
+      "llama3.1:latest",
+      "llama3.1:70b",
+      "llama3.1:8b",
+      "llama3.1:instruct",
+      "gemma3:12b",
+      "gemma3:27b",
+      "gemma3:4b",
+      "gemma3:7b",
+      "deepseek-r1:70b",
+      "deepseek-r1:32b",
+      "deepseek-r1:14b",
+      "deepseek-r1:8b",
+      "deepseek-r1:1.5b",
+      "qwen3:72b",
+      "qwen3:32b",
+      "qwen3:14b",
+      "qwen3:7b",
+      "qwen3:4b",
+      "mistral:7b",
+      "mistral:instruct",
+      "codellama:34b",
+      "codellama:13b",
+      "codellama:7b",
+      "codellama:instruct",
+      "phi3:14b",
+      "phi3:3.8b",
+      "phi3:mini",
+      "gemma2:27b",
+      "gemma2:9b",
+      "yi:34b",
+      "yi:9b",
+    ];
  }

  async enhancePrompt(prompt: string, model?: string): Promise<APIResponse<string>> {
@@ -198,6 +233,71 @@ Include specific recommendations for:

    return this.chatCompletion([systemMessage, userMessage], model || "gpt-oss:120b");
  }
+
+  async generateUXDesignerPrompt(appDescription: string, model?: string): Promise<APIResponse<string>> {
+    const systemMessage: ChatMessage = {
+      role: "system",
+      content: `You are a world-class UX/UI designer with deep expertise in human-centered design principles, user research, interaction design, visual design systems, and modern design tools (Figma, Sketch, Adobe XD).
+
+Your task is to create an exceptional, detailed prompt for generating the best possible UX design for a given app description.
+
+Generate a comprehensive UX design prompt that includes:
+
+1. USER RESEARCH & PERSONAS
+   - Primary target users and their motivations
+   - User pain points and needs
+   - User journey maps
+   - Persona archetypes with demographics and goals
+
+2. INFORMATION ARCHITECTURE
+   - Content hierarchy and organization
+   - Navigation structure and patterns
+   - User flows and key pathways
+   - Site map or app structure
+
+3. VISUAL DESIGN SYSTEM
+   - Color palette recommendations (primary, secondary, accent, neutral)
+   - Typography hierarchy and font pairings
+   - Component library approach
+   - Spacing, sizing, and layout grids
+   - Iconography style and set
+
+4. INTERACTION DESIGN
+   - Micro-interactions and animations
+   - Gesture patterns for touch interfaces
+   - Loading states and empty states
+   - Error handling and feedback mechanisms
+   - Accessibility considerations (WCAG compliance)
+
+5. KEY SCREENS & COMPONENTS
+   - Core screens that need detailed design
+   - Critical components (buttons, forms, cards, navigation)
+   - Data visualization needs
+   - Responsive design requirements (mobile, tablet, desktop)
+
+6. DESIGN DELIVERABLES
+   - Wireframes vs. high-fidelity mockups
+   - Design system documentation needs
+   - Prototyping requirements
+   - Handoff specifications for developers
+
+7. COMPETITIVE INSIGHTS
+   - Design patterns from successful apps in this category
+   - Opportunities to differentiate
+   - Modern design trends to consider
+
+The output should be a detailed, actionable prompt that a designer or AI image generator can use to create world-class UX designs.
+
+Make the prompt specific, inspiring, and comprehensive. Use professional UX terminology.`,
+    };
+
+    const userMessage: ChatMessage = {
+      role: "user",
+      content: `Create the BEST EVER UX design prompt for this app:\n\n${appDescription}`,
+    };
+
+    return this.chatCompletion([systemMessage, userMessage], model || "gpt-oss:120b");
+  }
 }

 export default OllamaCloudService;
--- a/lib/services/zai-plan.ts
+++ b/lib/services/zai-plan.ts
@@ -182,6 +182,71 @@ Include specific recommendations for:
  getAvailableModels(): string[] {
    return ["glm-4.7", "glm-4.6", "glm-4.5", "glm-4.5-air", "glm-4-flash", "glm-4-flashx"];
  }
+
+  async generateUXDesignerPrompt(appDescription: string, model?: string): Promise<APIResponse<string>> {
+    const systemMessage: ChatMessage = {
+      role: "system",
+      content: `You are a world-class UX/UI designer with deep expertise in human-centered design principles, user research, interaction design, visual design systems, and modern design tools (Figma, Sketch, Adobe XD).
+
+Your task is to create an exceptional, detailed prompt for generating the best possible UX design for a given app description.
+
+Generate a comprehensive UX design prompt that includes:
+
+1. USER RESEARCH & PERSONAS
+   - Primary target users and their motivations
+   - User pain points and needs
+   - User journey maps
+   - Persona archetypes with demographics and goals
+
+2. INFORMATION ARCHITECTURE
+   - Content hierarchy and organization
+   - Navigation structure and patterns
+   - User flows and key pathways
+   - Site map or app structure
+
+3. VISUAL DESIGN SYSTEM
+   - Color palette recommendations (primary, secondary, accent, neutral)
+   - Typography hierarchy and font pairings
+   - Component library approach
+   - Spacing, sizing, and layout grids
+   - Iconography style and set
+
+4. INTERACTION DESIGN
+   - Micro-interactions and animations
+   - Gesture patterns for touch interfaces
+   - Loading states and empty states
+   - Error handling and feedback mechanisms
+   - Accessibility considerations (WCAG compliance)
+
+5. KEY SCREENS & COMPONENTS
+   - Core screens that need detailed design
+   - Critical components (buttons, forms, cards, navigation)
+   - Data visualization needs
+   - Responsive design requirements (mobile, tablet, desktop)
+
+6. DESIGN DELIVERABLES
+   - Wireframes vs. high-fidelity mockups
+   - Design system documentation needs
+   - Prototyping requirements
+   - Handoff specifications for developers
+
+7. COMPETITIVE INSIGHTS
+   - Design patterns from successful apps in this category
+   - Opportunities to differentiate
+   - Modern design trends to consider
+
+The output should be a detailed, actionable prompt that a designer or AI image generator can use to create world-class UX designs.
+
+Make the prompt specific, inspiring, and comprehensive. Use professional UX terminology.`,
+    };
+
+    const userMessage: ChatMessage = {
+      role: "user",
+      content: `Create the BEST EVER UX design prompt for this app:\n\n${appDescription}`,
+    };
+
+    return this.chatCompletion([systemMessage, userMessage], model || "glm-4.7", true);
+  }
 }

 export default ZaiPlanService;