refactor: simplify layout of ChatBot and ImagePlayground components, update model configuration in web content analyzer

src/ai/chat/components/ChatBot.tsx

@@ -70,7 +70,7 @@ export default function ChatBot() {
   };
 
   return (
-    <div className="max-w-4xl mx-auto p-6 relative size-full h-screen rounded-lg bg-muted/50">
+    <div className="mx-auto p-6 relative size-full h-screen rounded-lg bg-muted/50">
       <div className="flex flex-col h-full">
         <Conversation className="h-full">
           <ConversationContent>

src/ai/image/components/ImagePlayground.tsx

@@ -76,9 +76,9 @@ export function ImagePlayground({
 
   return (
     <div className="rounded-lg bg-background py-8 px-4 sm:px-6 lg:px-8">
-      <div className="max-w-7xl mx-auto">
+      <div className="mx-auto">
         {/* header */}
-        <ImageGeneratorHeader />
+        {/* <ImageGeneratorHeader /> */}
 
         {/* input prompt */}
         <PromptInput

src/ai/text/components/url-input-form.tsx

@@ -91,10 +91,10 @@ export function UrlInputForm({
               <SelectValue placeholder="Select model" />
             </SelectTrigger>
             <SelectContent>
+              <SelectItem value="openrouter">OpenRouter</SelectItem>
               <SelectItem value="openai">OpenAI GPT-4o</SelectItem>
               <SelectItem value="gemini">Google Gemini</SelectItem>
-              <SelectItem value="deepseek">DeepSeek</SelectItem>
+              <SelectItem value="deepseek">DeepSeek R1</SelectItem>
-              <SelectItem value="openrouter">OpenRouter</SelectItem>
             </SelectContent>
           </Select>
         </div>

src/ai/text/components/web-content-analyzer.tsx

@@ -194,7 +194,8 @@ export function WebContentAnalyzer({ className }: WebContentAnalyzerProps) {
   const [state, dispatch] = useReducer(analysisReducer, initialState);
 
   // Model provider state
-  const [modelProvider, setModelProvider] = useState<ModelProvider>('openai');
+  const [modelProvider, setModelProvider] =
+    useState<ModelProvider>('openrouter');
 
   // Enhanced error state
   const [analyzedError, setAnalyzedError] =

src/ai/text/utils/web-content-analyzer-config.ts

@@ -115,7 +115,8 @@ export const webContentAnalyzerConfig = {
   openrouter: {
     // model: 'openrouter/horizon-beta',
     // model: 'x-ai/grok-3-beta',
-    model: 'openai/gpt-4o-mini',
+    // model: 'openai/gpt-4o-mini',
+    model: 'deepseek/deepseek-r1:free',
     temperature: 0.1,
     maxTokens: 2000,
   },

src/ai/text/utils/web-content-analyzer.ts

@@ -67,7 +67,7 @@ export interface AnalysisState {
 }
 
 // Component Props Interfaces
-export type ModelProvider = 'openai' | 'gemini' | 'deepseek';
+export type ModelProvider = 'openai' | 'gemini' | 'deepseek' | 'openrouter';
 
 export interface WebContentAnalyzerProps {
   className?: string;

src/app/[locale]/(marketing)/ai/chat/page.tsx

@@ -37,7 +37,9 @@ export default async function AIChatPage() {
         </div>
 
         {/* Chat Bot */}
-        <ChatBot />
+        <div className="max-w-6xl mx-auto">
+          <ChatBot />
+        </div>
       </div>
     </div>
   );

src/app/[locale]/(marketing)/ai/image/page.tsx

@@ -2,6 +2,7 @@ import { ImagePlayground } from '@/ai/image/components/ImagePlayground';
 import { getRandomSuggestions } from '@/ai/image/lib/suggestions';
 import { constructMetadata } from '@/lib/metadata';
 import { getUrlWithLocale } from '@/lib/urls/urls';
+import { ImageIcon } from 'lucide-react';
 import type { Metadata } from 'next';
 import type { Locale } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
@@ -26,8 +27,21 @@ export default async function AIImagePage() {
   const t = await getTranslations('AIImagePage');
 
   return (
-    <div className="mx-auto space-y-8">
+    <div className="min-h-screen bg-muted/50 rounded-lg">
-      <ImagePlayground suggestions={getRandomSuggestions(5)} />
+      <div className="container mx-auto px-4 py-8 md:py-16">
+        {/* Header Section */}
+        <div className="text-center space-y-6 mb-12">
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-primary text-sm font-medium">
+            <ImageIcon className="size-4" />
+            {t('title')}
+          </div>
+        </div>
+
+        {/* Image Playground Component */}
+        <div className="max-w-6xl mx-auto">
+          <ImagePlayground suggestions={getRandomSuggestions(5)} />
+        </div>
+      </div>
     </div>
   );
 }