[V0_FILE]typescriptreact:file="components/analysis-result.tsx" "use client" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { TrendingUp, TrendingDown, Minus, AlertTriangle } from "lucide-react" interface AnalysisResultProps { result: string | null isLoading: boolean analysisType: string } export function AnalysisResult({ result, isLoading, analysisType }: AnalysisResultProps) { if (isLoading) { return (

Processando análise...

) } if (!result) { return (

Carregue uma imagem e clique em "Analisar Gráfico" para ver os resultados

) } // Parse do resultado para extrair informações estruturadas const parseResult = (text: string) => { const lines = text.split("\n").filter((line) => line.trim()) const decision = lines.find( (line) => line.toLowerCase().includes("compra") || line.toLowerCase().includes("venda") || line.toLowerCase().includes("aguard"), ) let sentiment = "neutral" let icon = Minus let color = "bg-gray-500" if (decision) { if (decision.toLowerCase().includes("compra")) { sentiment = "bullish" icon = TrendingUp color = "bg-green-500" } else if (decision.toLowerCase().includes("venda")) { sentiment = "bearish" icon = TrendingDown color = "bg-red-500" } } return { decision, sentiment, icon, color, lines } } const { decision, sentiment, icon: Icon, color, lines } = parseResult(result) return (

{decision && (

Decisão

{decision}

)}

{lines.map((line, index) => (

{line}

))}

{analysisType === "price-action" && "Price Action"} {analysisType === "candlestick-patterns" && "Padrões de Candle"} {analysisType === "next-candle" && "Previsão"} {analysisType === "sniper-mode" && "Modo Sniper"} {analysisType === "learning-mode" && "Aprendizado"} {sentiment !== "neutral" && ( {sentiment === "bullish" ? "Alta" : "Baixa"} )}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Analisador de Gráficos IA - Trading Analysis", description: "Análise técnica avançada com inteligência artificial especializada em price action e padrões de candlestick", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/analysis-panel.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { TrendingUp, TrendingDown, Minus, AlertTriangle, Play, Target, Activity, Zap } from "lucide-react" interface AnalysisPanelProps { type: { id: string title: string description: string icon: any color: string } result: string | null isLoading: boolean onAnalyze: () => void hasImage: boolean } export function AnalysisPanel({ type, result, isLoading, onAnalyze, hasImage }: AnalysisPanelProps) { const Icon = type.icon if (isLoading) { return (

Analisando {type.title}...

Processando padrões e estruturas do gráfico

{[...Array(4)].map((_, i) => (

))}

) } if (!result) { return (

{type.title}

{type.description}

{hasImage ? ( ) : (

Carregue uma imagem primeiro

)}

) } // Parse do resultado const parseAnalysisResult = (text: string) => { const lines = text.split("\n").filter((line) => line.trim()) // Detectar decisão let decision = null let sentiment = "neutral" let confidence = null const decisionLine = lines.find((line) => /compra|venda|aguard|evite|buy|sell|hold/i.test(line)) if (decisionLine) { decision = decisionLine if (/compra|buy/i.test(decisionLine)) sentiment = "bullish" else if (/venda|sell/i.test(decisionLine)) sentiment = "bearish" else sentiment = "neutral" } // Detectar força do sinal (para padrões de candle) const strengthMatch = text.match(/força.*?(\d+).*?10|(\d+)\/10/i) if (strengthMatch) { confidence = Number.parseInt(strengthMatch[1] || strengthMatch[2]) } return { lines, decision, sentiment, confidence } } const { lines, decision, sentiment, confidence } = parseAnalysisResult(result) const getSentimentIcon = () => { switch (sentiment) { case "bullish": return TrendingUp case "bearish": return TrendingDown default: return Minus } } const getSentimentColor = () => { switch (sentiment) { case "bullish": return "text-green-400 bg-green-500/10 border-green-500/20" case "bearish": return "text-red-400 bg-red-500/10 border-red-500/20" default: return "text-slate-400 bg-slate-500/10 border-slate-500/20" } } const SentimentIcon = getSentimentIcon() return (

{/* Decision Card */} {decision && (

Decisão Operacional

{decision}

{confidence && (

Força do sinal: {confidence}/10

)}

)} {/* Analysis Details */}

{type.title}

{type.id === "sniper-mode" && } {type.id === "next-candle" && } {type.id === "price-action" && } Análise Completa

{lines.map((line, index) => (

{line}

{index < lines.length - 1 && index % 3 === 2 && }

))}

{/* Quick Actions */}

{new Date().toLocaleTimeString("pt-BR")}

) } [V0_FILE]typescriptreact:file="components/quick-actions.tsx" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Play, Zap, Target, TrendingUp } from "lucide-react" interface QuickActionsProps { onRunAll: () => void onRunSingle: (type: string) => void analysisTypes: any[] disabled: boolean } export function QuickActions({ onRunAll, onRunSingle, analysisTypes, disabled }: QuickActionsProps) { const quickAnalyses = [ { id: "sniper-mode", label: "Sniper", icon: Zap, color: "bg-red-600 hover:bg-red-700" }, { id: "price-action", label: "Price Action", icon: TrendingUp, color: "bg-blue-600 hover:bg-blue-700" }, { id: "next-candle", label: "Próxima Vela", icon: Target, color: "bg-purple-600 hover:bg-purple-700" }, ] return ( Ações Rápidas Execute análises específicas ou todas de uma vez

{quickAnalyses.map((analysis) => { const Icon = analysis.icon return ( ) })}

) } [V0_FILE]typescriptreact:file="components/image-upload.tsx" "use client" import type React from "react" import { useState, useRef } from "react" import { Button } from "@/components/ui/button" import { Upload, X, ImageIcon } from "lucide-react" interface ImageUploadProps { onImageUpload: (imageUrl: string) => void } export function ImageUpload({ onImageUpload }: ImageUploadProps) { const [dragActive, setDragActive] = useState(false) const [uploadedImage, setUploadedImage] = useState(null) const fileInputRef = useRef(null) const handleDrag = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() if (e.type === "dragenter" || e.type === "dragover") { setDragActive(true) } else if (e.type === "dragleave") { setDragActive(false) } } const handleDrop = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setDragActive(false) if (e.dataTransfer.files && e.dataTransfer.files[0]) { handleFile(e.dataTransfer.files[0]) } } const handleChange = (e: React.ChangeEvent) => { e.preventDefault() if (e.target.files && e.target.files[0]) { handleFile(e.target.files[0]) } } const handleFile = (file: File) => { if (file.type.startsWith("image/")) { const reader = new FileReader() reader.onload = (e) => { const imageUrl = e.target?.result as string setUploadedImage(imageUrl) onImageUpload(imageUrl) } reader.readAsDataURL(file) } } const removeImage = () => { setUploadedImage(null) } const openFileDialog = () => { fileInputRef.current?.click() } if (uploadedImage) { return (

Gráfico Carregado

) } return (

Arraste o gráfico aqui ou clique para selecionar

Suporta PNG, JPG, JPEG • Máximo 10MB

) } [V0_FILE]typescriptreact:file="app/api/analyze-chart/route.ts" isQuickEdit="true" import { type NextRequest, NextResponse } from "next/server" import { openai } from "@ai-sdk/openai" import { generateText } from "ai" const analysisPrompts = { "price-action": `Você é uma IA especialista em price action, candlestick e estrutura de mercado. Ao receber a imagem de um gráfico, identifique o ativo, a tendência, os padrões de candle, zonas de suporte/resistência e sinais de entrada. Retorne uma análise objetiva e direta com a decisão: comprar, vender ou aguardar. Justifique com base técnica.`, "candlestick-patterns": `Analise a imagem e identifique padrões clássicos de reversão ou continuidade, como martelo, engolfo, estrela da manhã, doji, inside bar, etc. Indique se o padrão é válido, falso ou incompleto. Indique também a força do sinal em uma escala de 0 a 10.`, "next-candle": `Com base nos candles anteriores mostrados na imagem, previsão da próxima vela: será de alta ou baixa? Longa ou curta? Indique probabilidade e o porquê da decisão, analisando contexto técnico (tendência, padrão, volume implícito e comportamento do preço).`, "sniper-mode": `Você é um sniper operacional. Recebe uma imagem e decide em segundos se entra ou não. Ignore teoria longa. Avalie estrutura, candle-chave, zonas, rompimentos e rejeições. Responda em linguagem direta: 'Compra agora', 'Venda forte', 'Aguarde retração' ou 'Evite'. Explique em 2 linhas o racional.`, "learning-mode": `Você está treinando com imagens de operações vencedoras e perdedoras. Para cada imagem recebida, extraia o padrão visual e associe ao resultado final (lucro/prejuízo). Aprenda a reconhecer padrões vencedores com mais precisão a cada novo exemplo.`, } export async function POST(request: NextRequest) { try { // Check if OpenAI API key is available if (!process.env.OPENAI_API_KEY) { return NextResponse.json( { error: "OpenAI API key não configurada", message: "Para usar esta funcionalidade, configure a variável de ambiente OPENAI_API_KEY", }, { status: 500 }, ) } const { imageUrl, analysisType } = await request.json() if (!imageUrl || !analysisType) { return NextResponse.json({ error: "Imagem e tipo de análise são obrigatórios" }, { status: 400 }) } const prompt = analysisPrompts[analysisType as keyof typeof analysisPrompts] if (!prompt) { return NextResponse.json({ error: "Tipo de análise inválido" }, { status: 400 }) } const { text } = await generateText({ model: openai("gpt-4o", { apiKey: process.env.OPENAI_API_KEY, }), messages: [ { role: "user", content: [ { type: "text", text: prompt, }, { type: "image", image: imageUrl, }, ], }, ], }) return NextResponse.json({ analysis: text }) } catch (error) { console.error("Erro na análise:", error) // Handle specific OpenAI errors if (error instanceof Error) { if (error.message.includes("API key")) { return NextResponse.json( { error: "Erro de autenticação", message: "Chave da API OpenAI inválida ou não configurada", }, { status: 401 }, ) } if (error.message.includes("quota")) { return NextResponse.json( { error: "Limite de uso excedido", message: "Cota da API OpenAI esgotada", }, { status: 429 }, ) } } return NextResponse.json( { error: "Erro interno do servidor", message: "Ocorreu um erro ao processar a análise. Tente novamente.", }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="components/config-notice.tsx" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { Button } from "@/components/ui/button" import { AlertTriangle, ExternalLink, Settings } from "lucide-react" export function ConfigNotice() { return ( Configuração Necessária Para usar as funcionalidades de análise com IA, configure a API OpenAI Esta aplicação requer uma chave da API OpenAI para funcionar completamente.

Obtenha uma chave da API OpenAI

Visite platform.openai.com/api-keys

Configure a variável de ambiente

OPENAI_API_KEY=sua_chave_aqui

Reinicie a aplicação

Para que as mudanças tenham efeito

) } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Upload, TrendingUp, Target, Brain, Zap, BarChart3, Activity, AlertCircle, CheckCircle, Clock, } from "lucide-react" import { ImageUpload } from "@/components/image-upload" import { AnalysisPanel } from "@/components/analysis-panel" import { QuickActions } from "@/components/quick-actions" export default function AdvancedTradingAnalyzer() { const [selectedImage, setSelectedImage] = useState(null) const [analyses, setAnalyses] = useState>({}) const [isAnalyzing, setIsAnalyzing] = useState>({}) const analysisTypes = [ { id: "price-action", title: "Price Action", description: "Análise completa de estrutura e sinais", icon: TrendingUp, color: "blue", prompt: "Você é uma IA especialista em price action, candlestick e estrutura de mercado. Ao receber a imagem de um gráfico, identifique o ativo, a tendência, os padrões de candle, zonas de suporte/resistência e sinais de entrada. Retorne uma análise objetiva e direta com a decisão: comprar, vender ou aguardar. Justifique com base técnica.", }, { id: "candlestick-patterns", title: "Padrões de Candle", description: "Detecção de padrões clássicos", icon: BarChart3, color: "green", prompt: "Analise a imagem e identifique padrões clássicos de reversão ou continuidade, como martelo, engolfo, estrela da manhã, doji, inside bar, etc. Indique se o padrão é válido, falso ou incompleto. Indique também a força do sinal em uma escala de 0 a 10.", }, { id: "next-candle", title: "Próxima Vela", description: "Previsão de direção e força", icon: Target, color: "purple", prompt: "Com base nos candles anteriores mostrados na imagem, previsão da próxima vela: será de alta ou baixa? Longa ou curta? Indique probabilidade e o porquê da decisão, analisando contexto técnico (tendência, padrão, volume implícito e comportamento do preço).", }, { id: "sniper-mode", title: "Modo Sniper", description: "Decisão rápida operacional", icon: Zap, color: "red", prompt: "Você é um sniper operacional. Recebe uma imagem e decide em segundos se entra ou não. Ignore teoria longa. Avalie estrutura, candle-chave, zonas, rompimentos e rejeições. Responda em linguagem direta: 'Compra agora', 'Venda forte', 'Aguarde retração' ou 'Evite'. Explique em 2 linhas o racional.", }, { id: "learning-mode", title: "Aprendizado", description: "Análise para treinamento", icon: Brain, color: "orange", prompt: "Você está treinando com imagens de operações vencedoras e perdedoras. Para cada imagem recebida, extraia o padrão visual e associe ao resultado final (lucro/prejuízo). Aprenda a reconhecer padrões vencedores com mais precisão a cada novo exemplo.", }, ] const handleImageUpload = (imageUrl: string) => { setSelectedImage(imageUrl) setAnalyses({}) } const runAnalysis = async (analysisType: string) => { if (!selectedImage) return setIsAnalyzing((prev) => ({ ...prev, [analysisType]: true })) try { const response = await fetch("/api/analyze-chart", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ imageUrl: selectedImage, analysisType, }), }) const data = await response.json() if (!response.ok) { // Handle API errors if (response.status === 500 && data.message?.includes("OPENAI_API_KEY")) { setAnalyses((prev) => ({ ...prev, [analysisType]: "⚠️ **Configuração Necessária**\n\nPara usar esta funcionalidade, você precisa:\n\n1. Obter uma chave da API OpenAI em https://platform.openai.com/api-keys\n2. Configurar a variável de ambiente OPENAI_API_KEY\n3. Reiniciar a aplicação\n\n**Nota:** Esta é uma demonstração que requer configuração da API OpenAI para funcionar completamente.", })) } else { setAnalyses((prev) => ({ ...prev, [analysisType]: `❌ **Erro:** ${data.message || "Erro ao processar análise"}\n\nTente novamente em alguns momentos.`, })) } return } setAnalyses((prev) => ({ ...prev, [analysisType]: data.analysis })) } catch (error) { console.error("Erro na análise:", error) setAnalyses((prev) => ({ ...prev, [analysisType]: "❌ **Erro de Conexão**\n\nNão foi possível conectar com o servidor de análise. Verifique sua conexão e tente novamente.", })) } finally { setIsAnalyzing((prev) => ({ ...prev, [analysisType]: false })) } } const runAllAnalyses = async () => { if (!selectedImage) return for (const type of analysisTypes) { await runAnalysis(type.id) } } const getAnalysisStatus = (typeId: string) => { if (isAnalyzing[typeId]) return "analyzing" if (analyses[typeId]) return "completed" return "pending" } return (

{/* Header */}

Trading AI Analyzer

Sistema avançado de análise técnica com IA especializada em price action, padrões de candlestick e estrutura de mercado

{/* Upload Panel */}

Upload do Gráfico Carregue a imagem do gráfico para análise {selectedImage && (

{/* Status Overview */}

{analysisTypes.map((type) => { const status = getAnalysisStatus(type.id) const Icon = type.icon return (

{type.title} {status === "completed" && } {status === "analyzing" && ( )} {status === "pending" && }

) })}

)}

{/* Analysis Results */}

Resultados da Análise Análises técnicas detalhadas com recomendações operacionais {analysisTypes.map((type) => { const Icon = type.icon const status = getAnalysisStatus(type.id) return ( {type.title} {status === "completed" && (

)} {status === "analyzing" && (

)} ) })} {analysisTypes.map((type) => ( runAnalysis(type.id)} hasImage={!!selectedImage} /> ))}

) }