diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx index 6ff7df1..17d01ed 100644 --- a/apps/desktop/src/App.tsx +++ b/apps/desktop/src/App.tsx @@ -19,6 +19,7 @@ import ChatTestPage from './pages/tools/ChatTestPage'; import WatermarkTool from './pages/tools/WatermarkTool'; import SimilaritySearchTool from './pages/tools/SimilaritySearchTool'; import BatchThumbnailGenerator from './pages/tools/BatchThumbnailGenerator'; +import OutfitRecommendationTool from './pages/tools/OutfitRecommendationTool'; import Navigation from './components/Navigation'; import { NotificationSystem, useNotifications } from './components/NotificationSystem'; @@ -121,6 +122,7 @@ function App() { } /> } /> } /> + } /> diff --git a/apps/desktop/src/data/tools.ts b/apps/desktop/src/data/tools.ts index 43f6913..d789c08 100644 --- a/apps/desktop/src/data/tools.ts +++ b/apps/desktop/src/data/tools.ts @@ -8,7 +8,8 @@ import { MessageCircle, Droplets, ImageIcon, - Search + Search, + Sparkles } from 'lucide-react'; import { Tool, ToolCategory, ToolStatus } from '../types/tool'; @@ -117,6 +118,21 @@ export const TOOLS_DATA: Tool[] = [ isPopular: true, version: '1.0.0', lastUpdated: '2024-01-25' + }, + { + id: 'outfit-recommendation', + name: 'AI穿搭方案推荐', + description: '基于TikTok视觉趋势的智能穿搭建议工具，提供个性化的时尚搭配方案', + longDescription: '专业的AI穿搭顾问工具，基于TikTok视觉趋势和时尚潮流，为用户生成个性化的穿搭方案。支持多种风格选择、场合匹配、色彩搭配建议，并提供TikTok优化建议和拍摄技巧，助力内容创作和时尚搭配。', + icon: Sparkles, + route: '/tools/outfit-recommendation', + category: ToolCategory.AI_TOOLS, + status: ToolStatus.STABLE, + tags: ['AI穿搭', '时尚搭配', 'TikTok', '个性化推荐', '视觉趋势'], + isNew: true, + isPopular: true, + version: '1.0.0', + lastUpdated: '2024-01-25' } ]; diff --git a/apps/desktop/src/pages/tools/OutfitRecommendationTool.tsx b/apps/desktop/src/pages/tools/OutfitRecommendationTool.tsx new file mode 100644 index 0000000..08bb536 --- /dev/null +++ b/apps/desktop/src/pages/tools/OutfitRecommendationTool.tsx @@ -0,0 +1,361 @@ +import React, { useState, useCallback } from 'react'; +import { + Sparkles, + ArrowLeft, + Wand2, + Shirt, + Download, + Copy, + RefreshCw, + Settings, + Info +} from 'lucide-react'; +import { useNavigate } from 'react-router-dom'; +import OutfitRecommendationService from '../../services/outfitRecommendationService'; +import { OutfitRecommendation, STYLE_OPTIONS, OCCASION_OPTIONS, SEASON_OPTIONS } from '../../types/outfitRecommendation'; +import OutfitRecommendationList from '../../components/outfit/OutfitRecommendationList'; +import { CustomSelect } from '../../components/CustomSelect'; + +/** + * AI穿搭方案推荐小工具 + * 遵循 Tauri 开发规范和 UI/UX 设计标准 + */ +const OutfitRecommendationTool: React.FC = () => { + const navigate = useNavigate(); + + // 状态管理 + const [query, setQuery] = useState(''); + const [targetStyle, setTargetStyle] = useState(''); + const [occasions, setOccasions] = useState([]); + const [season, setSeason] = useState(''); + const [colorPreferences, setColorPreferences] = useState([]); + const [count, setCount] = useState(3); + + const [recommendations, setRecommendations] = useState([]); + const [isGenerating, setIsGenerating] = useState(false); + const [error, setError] = useState(null); + const [showAdvanced, setShowAdvanced] = useState(false); + + // 返回工具列表 + const handleBackToTools = useCallback(() => { + navigate('/tools'); + }, [navigate]); + + // 生成穿搭方案 + const handleGenerate = useCallback(async () => { + if (!query.trim()) { + setError('请输入穿搭关键词或描述'); + return; + } + + setIsGenerating(true); + setError(null); + + try { + const response = await OutfitRecommendationService.generateRecommendations({ + query: query.trim(), + target_style: targetStyle || undefined, + occasions: occasions.length > 0 ? occasions : undefined, + season: season || undefined, + color_preferences: colorPreferences.length > 0 ? colorPreferences : undefined, + count, + }); + + setRecommendations(response.recommendations); + } catch (err) { + console.error('穿搭方案生成失败:', err); + setError(err instanceof Error ? err.message : '穿搭方案生成失败'); + } finally { + setIsGenerating(false); + } + }, [query, targetStyle, occasions, season, colorPreferences, count]); + + // 重新生成 + const handleRegenerate = useCallback(() => { + handleGenerate(); + }, [handleGenerate]); + + // 清空表单 + const handleClear = useCallback(() => { + setQuery(''); + setTargetStyle(''); + setOccasions([]); + setSeason(''); + setColorPreferences([]); + setCount(3); + setRecommendations([]); + setError(null); + }, []); + + // 导出结果 + const handleExport = useCallback(() => { + if (recommendations.length === 0) { + return; + } + + const exportData = { + query, + generated_at: new Date().toISOString(), + recommendations: recommendations.map(rec => ({ + title: rec.title, + description: rec.description, + overall_style: rec.overall_style, + style_tags: rec.style_tags, + occasions: rec.occasions, + seasons: rec.seasons, + color_theme: rec.color_theme, + items: rec.items, + tiktok_tips: rec.tiktok_tips, + styling_tips: rec.styling_tips, + })) + }; + + const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = `outfit-recommendations-${Date.now()}.json`; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); + }, [recommendations, query]); + + // 复制结果 + const handleCopy = useCallback(() => { + if (recommendations.length === 0) { + return; + } + + const text = recommendations.map(rec => + `${rec.title}\n${rec.description}\n风格: ${rec.style_tags.join(', ')}\n\n` + ).join(''); + + navigator.clipboard.writeText(text); + }, [recommendations]); + + return ( +
+ {/* 顶部导航 */} +
+
+
+
+ + +
+ +
+
+ +
+
+

AI穿搭方案推荐

+

基于TikTok视觉趋势的智能穿搭建议

+
+
+
+ +
+ {recommendations.length > 0 && ( + <> + + + + )} + +
+
+
+
+ + {/* 主要内容 */} +
+
+ {/* 左侧输入区域 */} +
+
+
+ {/* 基础输入 */} +
+ +