adding new mindforge applications

Mindforge.Web/src/app.css

@@ -0,0 +1,62 @@
+.home-hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  animation: fadeIn 0.8s ease-out;
+}
+
+.hero-title {
+  font-size: 4rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  margin-bottom: 1rem;
+  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+  background: linear-gradient(90deg, #f4f5f5, #00b4d8);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.hero-subtitle {
+  font-size: 1.5rem;
+  color: rgba(244, 245, 245, 0.8);
+  font-weight: 300;
+  letter-spacing: 1px;
+}
+
+.module-content {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  animation: slideUp 0.5s ease-out;
+}
+
+.subtitle {
+  font-size: 1.2rem;
+  color: rgba(244, 245, 245, 0.8);
+  margin-bottom: 2rem;
+}
+
+.placeholder-box {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px dashed rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  padding: 4rem 2rem;
+  font-size: 1.5rem;
+  color: rgba(244, 245, 245, 0.5);
+  text-align: center;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}

Mindforge.Web/src/app.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'preact/hooks';
+import './app.css';
+import { Header } from './components/Header';
+import { Sidebar } from './components/Sidebar';
+import { VerificadorComponent } from './components/VerificadorComponent';
+import { FlashcardComponent } from './components/FlashcardComponent';
+
+export function App() {
+  const [activeModule, setActiveModule] = useState<'home' | 'verificador' | 'flashcards'>('home');
+
+  return (
+    <>
+      <Header onGoHome={() => setActiveModule('home')} />
+      <div class="main-layout">
+        <Sidebar activeModule={activeModule} onModuleChange={setActiveModule} />
+        <main class="content-area">
+          <div style={{ display: activeModule === 'home' || !activeModule ? 'block' : 'none' }}>
+            <div class="home-hero">
+              <img src="/assets/mindforge-banner.png" alt="Mindforge Banner" style={{ maxWidth: '100%', height: 'auto', marginBottom: '2rem', borderRadius: '12px', boxShadow: '0 4px 15px rgba(0,0,0,0.5)', zIndex: -10 }} />
+              <h1 class="hero-title">Mindforge! - STAY HARD!</h1>
+              <p class="hero-subtitle">Sua ferramenta de forja mental e estudos.</p>
+            </div>
+          </div>
+          <div style={{ display: activeModule === 'verificador' ? 'block' : 'none', height: '100%', width: '100%' }}>
+            <VerificadorComponent />
+          </div>
+          <div style={{ display: activeModule === 'flashcards' ? 'block' : 'none', height: '100%', width: '100%' }}>
+            <FlashcardComponent />
+          </div>
+        </main>
+      </div>
+    </>
+  );
+}

Mindforge.Web/src/components/Button.css

@@ -0,0 +1,41 @@
+.btn {
+  font-family: var(--font-main);
+  font-weight: 700;
+  font-size: 1rem;
+  padding: 0.8rem 1.5rem;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  letter-spacing: 0.5px;
+}
+
+.btn-primary {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--color-text-creamy);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.btn-primary:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+.btn-primary:active {
+  transform: translateY(0);
+}
+
+.btn-secondary {
+  background: transparent;
+  color: var(--color-text-creamy);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.05);
+}

Mindforge.Web/src/components/Button.tsx

@@ -0,0 +1,22 @@
+import type { ComponentChildren } from 'preact';
+import './Button.css';
+
+interface ButtonProps extends preact.JSX.HTMLAttributes<HTMLButtonElement> {
+  children: ComponentChildren;
+  variant?: 'primary' | 'secondary';
+  className?: string;
+  onClick?: (e?: any) => any;
+  disabled?: boolean;
+  style?: any;
+}
+
+export function Button({ children, variant = 'primary', className = '', ...props }: ButtonProps) {
+  return (
+    <button 
+      className={`btn btn-${variant} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

Mindforge.Web/src/components/FlashcardComponent.css

@@ -0,0 +1,207 @@
+.flashcard-container {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  animation: slideUp 0.5s ease-out;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.flashcard-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  padding: 2rem;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  text-align: left;
+}
+
+.input-group label {
+  font-weight: 700;
+  color: var(--color-text-creamy);
+}
+
+.text-area {
+  width: 100%;
+  min-height: 200px;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  padding: 1rem;
+  color: var(--color-text-creamy);
+  font-family: inherit;
+  font-size: 1rem;
+  resize: vertical;
+}
+
+.text-area:focus {
+  outline: none;
+  border-color: var(--color-accent);
+}
+
+.file-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.file-input {
+  display: none;
+}
+
+.file-input-label {
+  background: var(--color-sidebar);
+  color: var(--color-text-creamy);
+  padding: 0.6rem 1.2rem;
+  border-radius: 6px;
+  cursor: pointer;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.2s ease;
+}
+
+.file-input-label:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: var(--color-accent);
+}
+
+.slider-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.slider-input {
+  flex: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 8px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  outline: none;
+}
+
+.slider-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--color-accent);
+  cursor: pointer;
+  transition: transform 0.1s;
+}
+
+.slider-input::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+}
+
+.amount-display {
+  font-weight: 700;
+  color: var(--color-accent);
+  min-width: 40px;
+  text-align: right;
+  font-size: 1.1rem;
+}
+
+/* Spinner */
+.spinner-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 0;
+  gap: 1rem;
+}
+
+.spinner {
+  width: 50px;
+  height: 50px;
+  border: 4px solid rgba(255, 255, 255, 0.1);
+  border-left-color: var(--color-accent);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.success-message {
+  color: #7ee787;
+  text-align: center;
+  font-weight: 700;
+  margin-top: 1rem;
+  animation: fadeIn 0.5s ease-out;
+}
+
+.radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  background: rgba(0, 0, 0, 0.3);
+  padding: 4px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  width: fit-content;
+  overflow: hidden;
+  gap: 4px;
+}
+
+.radio-item {
+  position: relative;
+  flex: 1;
+  min-width: 100px;
+}
+
+.radio-item input[type="radio"] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.radio-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.8rem 1.2rem;
+  cursor: pointer;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.6);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+}
+
+.radio-item input[type="radio"]:checked + .radio-label {
+  background: var(--color-accent);
+  color: #000;
+  box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.3);
+}
+
+.radio-item:hover .radio-label:not(.radio-item input[type="radio"]:checked + .radio-label) {
+  background: rgba(255, 255, 255, 0.05);
+  color: #fff;
+}
+
+/* Animations for selection */
+.radio-item input[type="radio"]:checked + .radio-label {
+  animation: selectBounce 0.3s ease-out;
+}
+
+@keyframes selectBounce {
+  0% { transform: scale(0.95); }
+  50% { transform: scale(1.02); }
+  100% { transform: scale(1); }
+}

Mindforge.Web/src/components/FlashcardComponent.tsx

@@ -0,0 +1,209 @@
+import { useState, useRef } from 'preact/hooks';
+import { MindforgeApiService, type FlashcardMode } from '../services/MindforgeApiService';
+
+// Mapping of flashcard mode to its maximum allowed amount
+const modeMax: Record<FlashcardMode, number> = {
+  Basic: 25,
+  Simple: 30,
+  Detailed: 70,
+  Hyper: 130,
+};
+
+import { Button } from './Button';
+import './FlashcardComponent.css';
+
+function utf8ToBase64(str: string): string {
+  const bytes = new TextEncoder().encode(str);
+  const binary = Array.from(bytes, byte => String.fromCharCode(byte)).join('');
+  return window.btoa(binary);
+}
+
+export function FlashcardComponent() {
+  const [text, setText] = useState('');
+  const [fileName, setFileName] = useState('manual_input.md');
+  const [amount, setAmount] = useState<number>(20);
+  const [mode, setMode] = useState<FlashcardMode>('Simple');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<boolean>(false);
+
+  const handleModeChange = (newMode: FlashcardMode) => {
+    setMode(newMode); // set the mode
+    setAmount(20); // set the default amount
+  };
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileUpload = (e: Event) => {
+    const target = e.target as HTMLInputElement;
+    if (target.files && target.files.length > 0) {
+      const file = target.files[0];
+      setFileName(file.name);
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        if (event.target?.result) {
+          setText(event.target.result as string);
+        }
+      };
+      reader.readAsText(file);
+    }
+  };
+
+  const handleGenerate = async () => {
+    if (!text.trim()) {
+      setError('Por favor, insira algum texto ou faça upload de um arquivo para gerar os flashcards.');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    setSuccess(false);
+
+    try {
+      const base64Content = utf8ToBase64(text);
+      const res = await MindforgeApiService.generateFlashcards({
+        fileContent: base64Content,
+        fileName,
+        amount,
+        mode
+      });
+
+      const csvContent = res.result;
+      downloadCSV(csvContent);
+      setSuccess(true);
+    } catch (err: any) {
+      setError(err.message || 'Ocorreu um erro ao gerar os flashcards.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const downloadCSV = (content: string) => {
+    // Adicionar BOM do UTF-8 para o Excel reconhecer os caracteres corretamente
+    const bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
+    const blob = new Blob([bom, content], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', `flashcards_${Date.now()}.csv`);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className="flashcard-container">
+      <h2 className="title" style={{ fontSize: '2.5rem' }}>Gerador de Flashcards</h2>
+      <p className="subtitle">Crie flashcards baseados nos seus materiais de estudo rapidamente.</p>
+
+      <div className="flashcard-form">
+        <div className="input-group">
+          <label>Texto (Markdown)</label>
+          <textarea
+            className="text-area"
+            value={text}
+            onInput={(e) => setText((e.target as HTMLTextAreaElement).value)}
+            placeholder="Cole seu texto de estudo aqui ou faça upload do material..."
+          />
+        </div>
+
+        <div className="file-input-wrapper">
+          <input
+            type="file"
+            accept=".md,.txt,.html"
+            ref={fileInputRef}
+            onChange={handleFileUpload}
+            className="file-input"
+            id="flashcard-file"
+          />
+          <label htmlFor="flashcard-file" className="file-input-label">
+            📁 Escolher Arquivo
+          </label>
+          <span style={{ fontSize: '0.9rem', color: 'rgba(255,255,255,0.6)' }}>
+            {fileName !== 'manual_input.md' ? fileName : 'Nenhum arquivo selecionado'}
+          </span>
+        </div>
+
+        <div className="input-group">
+          <label>Quantidade Estimada de Flashcards (10 - 100)</label>
+          <div className="slider-wrapper">
+            <input
+              type="range"
+              className="slider-input"
+              min="10"
+              max={modeMax[mode]}
+              value={amount}
+              onInput={(e) => setAmount(parseInt((e.target as HTMLInputElement).value))}
+            />
+            <span className="amount-display">{amount}</span>
+          </div>
+        </div>
+
+        <div className="input-group">
+          <label>Modo de Geração</label>
+          <div className="radio-group">
+            <div className="radio-item">
+              <input
+                type="radio"
+                id="mode-basic"
+                name="mode"
+                value="Basic"
+                checked={mode === 'Basic'}
+                onChange={(e) => handleModeChange((e.target as HTMLInputElement).value as FlashcardMode)}
+              />
+              <label htmlFor="mode-basic" className="radio-label" title="Modo básico, rápido e simples. Geralmente conteúdos simples e repetíveis">Básico</label>
+            </div>
+            <div className="radio-item">
+              <input
+                type="radio"
+                id="mode-simple"
+                name="mode"
+                value="Simple"
+                checked={mode === 'Simple'}
+                onChange={(e) => handleModeChange((e.target as HTMLInputElement).value as FlashcardMode)}
+              />
+              <label htmlFor="mode-simple" className="radio-label" title="Modo rápido e simples, possui uma melhor compreensão">Simples</label>
+            </div>
+            <div className="radio-item">
+              <input
+                type="radio"
+                id="mode-detailed"
+                name="mode"
+                value="Detailed"
+                checked={mode === 'Detailed'}
+                onChange={(e) => handleModeChange((e.target as HTMLInputElement).value as FlashcardMode)}
+              />
+              <label htmlFor="mode-detailed" className="radio-label" title="Modelo avançado, maior gama de detalhes">Detalhado</label>
+            </div>
+            <div className="radio-item">
+              <input
+                type="radio"
+                id="mode-hyper"
+                name="mode"
+                value="Hyper"
+                checked={mode === 'Hyper'}
+                onChange={(e) => handleModeChange((e.target as HTMLInputElement).value as FlashcardMode)}
+              />
+              <label htmlFor="mode-hyper" className="radio-label" title="Modelo Pro, complexo e com perguntas adicionais">Hiper</label>
+            </div>
+          </div>
+        </div>
+
+        <Button variant="primary" onClick={handleGenerate} disabled={loading} style={{ marginTop: '1rem' }}>
+          {loading ? 'Gerando...' : 'Gerar Flashcards e Baixar (CSV)'}
+        </Button>
+
+        {error && <div style={{ color: '#ff7b72', marginTop: '1rem' }}>{error}</div>}
+        {success && <div className="success-message">Flashcards gerados com sucesso! O download deve ter começado.</div>}
+      </div>
+
+      {loading && (
+        <div className="spinner-container">
+          <div className="spinner"></div>
+          <p>Extraindo os melhores conceitos para os seus flashcards. Aguarde...</p>
+        </div>
+      )}
+    </div>
+  );
+}

Mindforge.Web/src/components/Header.css

@@ -0,0 +1,36 @@
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 70px;
+  background-color: var(--color-header);
+  /* Imposing black with glassy effect */
+  background: rgba(15, 15, 15, 0.85);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.header-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.header-title {
+  color: var(--color-text-creamy);
+  font-family: var(--font-main);
+  font-size: 1.8rem;
+  font-weight: 700;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  margin: 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+}

Mindforge.Web/src/components/Header.tsx

@@ -0,0 +1,19 @@
+import './Header.css';
+
+interface HeaderProps {
+  onGoHome?: () => void;
+}
+
+export function Header({ onGoHome }: HeaderProps) {
+  return (
+    <header class="header">
+      <div class="header-content">
+        <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} onClick={onGoHome}>
+          <img src="/assets/mindforge.png" alt="Mindforge" width="55" height="55" style={{ marginRight: '10px' }} />
+
+          <h1 class="header-title">Mindforge</h1>
+        </div>
+      </div>
+    </header>
+  );
+}

Mindforge.Web/src/components/Sidebar.css

@@ -0,0 +1,41 @@
+.sidebar {
+  width: 280px;
+  background-color: var(--color-sidebar);
+  border-right: 1px solid rgba(255, 255, 255, 0.05);
+  display: flex;
+  flex-direction: column;
+  padding: 2rem 1.5rem;
+  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
+  /* Ensure it fits cleanly below the header or is independent */
+  height: calc(100vh - 70px);
+  position: sticky;
+  top: 70px;
+}
+
+.sidebar-header {
+  margin-bottom: 2rem;
+}
+
+.sidebar-title {
+  color: rgba(244, 245, 245, 0.6);
+  font-size: 0.9rem;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  font-weight: 700;
+  margin: 0;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.sidebar-btn {
+  width: 100%;
+  text-align: left;
+  display: flex;
+  justify-content: flex-start;
+  padding: 1rem 1.2rem;
+  font-size: 1.05rem;
+}

Mindforge.Web/src/components/Sidebar.tsx

@@ -0,0 +1,33 @@
+import { Button } from './Button';
+import './Sidebar.css';
+
+interface SidebarProps {
+  onModuleChange: (module: 'home' | 'verificador' | 'flashcards') => void;
+  activeModule: 'home' | 'verificador' | 'flashcards';
+}
+
+export function Sidebar({ onModuleChange, activeModule }: SidebarProps) {
+  return (
+    <aside class="sidebar">
+      <div class="sidebar-header">
+        <h2 class="sidebar-title">Módulos</h2>
+      </div>
+      <div class="sidebar-nav">
+        <Button
+          variant={activeModule === 'verificador' ? 'primary' : 'secondary'}
+          onClick={() => onModuleChange('verificador')}
+          className="sidebar-btn"
+        >
+          Verificador
+        </Button>
+        <Button
+          variant={activeModule === 'flashcards' ? 'primary' : 'secondary'}
+          onClick={() => onModuleChange('flashcards')}
+          className="sidebar-btn"
+        >
+          Flashcards
+        </Button>
+      </div>
+    </aside>
+  );
+}

Mindforge.Web/src/components/VerificadorComponent.css

@@ -0,0 +1,181 @@
+.verificador-container {
+  width: 100%;
+  max-width: 1000px;
+  margin: 0 auto;
+  animation: slideUp 0.5s ease-out;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.verificador-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  padding: 2rem;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  text-align: left;
+}
+
+.input-group label {
+  font-weight: 700;
+  color: var(--color-text-creamy);
+}
+
+.text-area {
+  width: 100%;
+  min-height: 200px;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  padding: 1rem;
+  color: var(--color-text-creamy);
+  font-family: inherit;
+  font-size: 1rem;
+  resize: vertical;
+}
+
+.text-area:focus {
+  outline: none;
+  border-color: var(--color-accent);
+}
+
+.file-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.file-input {
+  display: none;
+}
+
+.file-input-label {
+  background: var(--color-sidebar);
+  color: var(--color-text-creamy);
+  padding: 0.6rem 1.2rem;
+  border-radius: 6px;
+  cursor: pointer;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.2s ease;
+}
+
+.file-input-label:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: var(--color-accent);
+}
+
+.select-input {
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: var(--color-text-creamy);
+  padding: 0.8rem;
+  border-radius: 8px;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.select-input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+}
+
+.select-input option {
+  background: var(--color-bg);
+  color: var(--color-text-creamy);
+}
+
+/* Response Section */
+.response-section {
+  background: rgba(255, 255, 255, 0.05);
+  padding: 2rem;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.response-content {
+  text-align: left;
+  white-space: pre-wrap;
+  background: rgba(0, 0, 0, 0.2);
+  padding: 1.5rem;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  font-family: monospace;
+  font-size: 0.95rem;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.diff-view {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.diff-added {
+  background-color: rgba(46, 160, 67, 0.3);
+  color: #7ee787;
+  border-radius: 3px;
+}
+
+.diff-removed {
+  background-color: rgba(248, 81, 73, 0.3);
+  color: #ff7b72;
+  text-decoration: line-through;
+  border-radius: 3px;
+}
+
+.side-by-side {
+  display: flex;
+  gap: 1rem;
+  width: 100%;
+}
+
+.side-pane {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.pane-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  text-align: center;
+  color: var(--color-accent);
+}
+
+/* Spinner */
+.spinner-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 0;
+  gap: 1rem;
+}
+
+.spinner {
+  width: 50px;
+  height: 50px;
+  border: 4px solid rgba(255, 255, 255, 0.1);
+  border-left-color: var(--color-accent);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

Mindforge.Web/src/components/VerificadorComponent.tsx

@@ -0,0 +1,197 @@
+import { useState, useRef } from 'preact/hooks';
+import { MindforgeApiService } from '../services/MindforgeApiService';
+import { Button } from './Button';
+import * as diff from 'diff';
+import { marked } from 'marked';
+import './VerificadorComponent.css';
+
+function utf8ToBase64(str: string): string {
+  const bytes = new TextEncoder().encode(str);
+  const binary = Array.from(bytes, byte => String.fromCharCode(byte)).join('');
+  return window.btoa(binary);
+}
+
+type CheckTypeEnum = 'language' | 'content' | 'both';
+
+export function VerificadorComponent() {
+  const [text, setText] = useState('');
+  const [fileName, setFileName] = useState('manual_input.md');
+  const [checkType, setCheckType] = useState<CheckTypeEnum>('language');
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [languageResult, setLanguageResult] = useState<string | null>(null);
+  const [contentResult, setContentResult] = useState<string | null>(null);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileUpload = (e: Event) => {
+    const target = e.target as HTMLInputElement;
+    if (target.files && target.files.length > 0) {
+      const file = target.files[0];
+      setFileName(file.name);
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        if (event.target?.result) {
+          setText(event.target.result as string);
+        }
+      };
+      reader.readAsText(file);
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (!text.trim()) {
+      setError('Por favor, insira algum texto ou faça upload de um arquivo.');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    setLanguageResult(null);
+    setContentResult(null);
+
+    const base64Content = utf8ToBase64(text);
+
+    try {
+      if (checkType === 'both') {
+        const [langRes, contRes] = await Promise.all([
+          MindforgeApiService.checkFile({ fileContent: base64Content, fileName, checkType: 'language' }),
+          MindforgeApiService.checkFile({ fileContent: base64Content, fileName, checkType: 'content' })
+        ]);
+        setLanguageResult(langRes.result);
+        setContentResult(contRes.result);
+      } else {
+        const res = await MindforgeApiService.checkFile({ fileContent: base64Content, fileName, checkType });
+        if (checkType === 'language') setLanguageResult(res.result);
+        else setContentResult(res.result);
+      }
+    } catch (err: any) {
+      setError(err.message || 'Ocorreu um erro ao processar sua requisição.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const renderDiff = (original: string, updated: string) => {
+    const diffResult = diff.diffWordsWithSpace(original, updated);
+    return (
+      <div className="diff-view">
+        {diffResult.map((part, index) => {
+          const className = part.added ? 'diff-added' : part.removed ? 'diff-removed' : '';
+          return (
+            <span key={index} className={className}>
+              {part.value}
+            </span>
+          );
+        })}
+      </div>
+    );
+  };
+
+  return (
+    <div className="verificador-container">
+      <h2 className="title" style={{ fontSize: '2.5rem' }}>Verificador de Arquivos</h2>
+      <p className="subtitle">Faça o upload do seu arquivo Markdown para validação de linguagem ou conteúdo.</p>
+
+      <div className="verificador-form">
+        <div className="input-group">
+          <label>Texto (Markdown)</label>
+          <textarea
+            className="text-area"
+            value={text}
+            onInput={(e) => setText((e.target as HTMLTextAreaElement).value)}
+            placeholder="Cole seu texto aqui ou faça upload de um arquivo..."
+          />
+        </div>
+
+        <div className="file-input-wrapper">
+          <input
+            type="file"
+            accept=".md,.txt"
+            ref={fileInputRef}
+            onChange={handleFileUpload}
+            className="file-input"
+            id="verificador-file"
+          />
+          <label htmlFor="verificador-file" className="file-input-label">
+            📁 Escolher Arquivo
+          </label>
+          <span style={{ fontSize: '0.9rem', color: 'rgba(255,255,255,0.6)' }}>
+            {fileName !== 'manual_input.md' ? fileName : 'Nenhum arquivo selecionado'}
+          </span>
+        </div>
+
+        <div className="input-group">
+          <label>Tipo de Verificação</label>
+          <select
+            className="select-input"
+            value={checkType}
+            onChange={(e) => setCheckType((e.target as HTMLSelectElement).value as CheckTypeEnum)}
+          >
+            <option value="language">Linguagem</option>
+            <option value="content">Conteúdo</option>
+            <option value="both">Linguagem e Conteúdo</option>
+          </select>
+        </div>
+
+        <Button variant="primary" onClick={handleSubmit} disabled={loading} style={{ marginTop: '1rem' }}>
+          {loading ? 'Processando...' : 'Verificar'}
+        </Button>
+
+        {error && <div style={{ color: '#ff7b72', marginTop: '1rem' }}>{error}</div>}
+      </div>
+
+      {loading && (
+        <div className="spinner-container">
+          <div className="spinner"></div>
+          <p>Analisando sua forja mental...</p>
+        </div>
+      )}
+
+      {/* Render Results */}
+      {!loading && (languageResult || contentResult) && (
+        <div className="response-section">
+          {checkType === 'language' && languageResult && (
+            <div className="side-pane">
+              <div className="pane-title">Resultado - Linguagem (Diff)</div>
+              <div className="response-content">
+                {renderDiff(text, languageResult)}
+              </div>
+            </div>
+          )}
+
+          {checkType === 'content' && contentResult && (
+            <div className="side-pane">
+              <div className="pane-title">Resultado - Conteúdo</div>
+              <div 
+                className="response-content markdown-body" 
+                dangerouslySetInnerHTML={{ __html: marked.parse(contentResult) as string }} 
+              />
+            </div>
+          )}
+
+          {checkType === 'both' && languageResult && contentResult && (
+            <div className="side-by-side">
+              <div className="side-pane">
+                <div className="pane-title">Linguagem (Diff)</div>
+                <div className="response-content" style={{ minHeight: '300px' }}>
+                  {renderDiff(text, languageResult)}
+                </div>
+              </div>
+              <div className="side-pane">
+                <div className="pane-title">Conteúdo</div>
+                <div 
+                  className="response-content markdown-body" 
+                  style={{ minHeight: '300px' }}
+                  dangerouslySetInnerHTML={{ __html: marked.parse(contentResult) as string }} 
+                />
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

Mindforge.Web/src/index.css

@@ -0,0 +1,57 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
+
+:root {
+  --color-bg: #005873;
+  --color-header: #0f0f0f;
+  --color-sidebar: #013a4c;
+  --color-text-creamy: #f4f5f5;
+  --color-accent: #00b4d8;
+  --color-accent-rgb: 0, 180, 216;
+  --color-accent-hover: #0096c7;
+  
+  --font-main: 'Lato', sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-main);
+  background-color: var(--color-bg);
+  color: var(--color-text-creamy);
+  margin: 0;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.main-layout {
+  display: flex;
+  flex: 1;
+  margin-top: 70px; /* offset for fixed header */
+}
+
+.content-area {
+  flex: 1;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.title {
+  font-size: 3rem;
+  font-weight: 700;
+  margin-bottom: 2rem;
+  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}

Mindforge.Web/src/main.tsx

@@ -0,0 +1,5 @@
+import { render } from 'preact'
+import './index.css'
+import { App } from './app.tsx'
+
+render(<App />, document.getElementById('app')!)

Mindforge.Web/src/services/MindforgeApiService.ts

@@ -0,0 +1,56 @@
+const BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5123';
+
+export interface CheckFileRequest {
+  fileContent: string;
+  fileName: string;
+  checkType: 'language' | 'content';
+}
+
+export interface CheckFileResponse {
+  result: string;
+}
+
+export interface GenerateFlashcardsRequest {
+  fileContent: string;
+  fileName: string;
+  amount: number;
+  mode: FlashcardMode;
+}
+
+export type FlashcardMode = 'Basic' | 'Simple' | 'Detailed' | 'Hyper';
+
+export interface GenerateFlashcardsResponse {
+  result: string;
+}
+
+export const MindforgeApiService = {
+  async checkFile(data: CheckFileRequest): Promise<CheckFileResponse> {
+    const response = await fetch(`${BASE_URL}/api/v1/file/check`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Error checking file: ${response.statusText}`);
+    }
+    return response.json();
+  },
+
+  async generateFlashcards(data: GenerateFlashcardsRequest): Promise<GenerateFlashcardsResponse> {
+    const response = await fetch(`${BASE_URL}/api/v1/flashcard/generate`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Error generating flashcards: ${response.statusText}`);
+    }
+    return response.json();
+  }
+};