initial commit
This commit is contained in:
sirin.ph
commit
6f9defe29a
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
267
App.tsx
Normal file
267
App.tsx
Normal file
@ -0,0 +1,267 @@
|
|||||||
|
import React, { useContext, useState } from "react";
|
||||||
|
import { HashRouter, Routes, Route, Link, useLocation } from "react-router-dom";
|
||||||
|
import { Home } from "./pages/Home";
|
||||||
|
import { BlogPost } from "./pages/BlogPost";
|
||||||
|
import { Research } from "./pages/Research";
|
||||||
|
import { Services } from "./pages/Services";
|
||||||
|
import { HireUs } from "./pages/HireUs";
|
||||||
|
import { Playground } from "./pages/Playground";
|
||||||
|
import { ChatWidget } from "./components/ChatWidget";
|
||||||
|
import { Cpu, Menu, X, Globe, Terminal } from "lucide-react";
|
||||||
|
|
||||||
|
// --- Language Context ---
|
||||||
|
type Language = "en" | "th";
|
||||||
|
|
||||||
|
interface LanguageContextType {
|
||||||
|
language: Language;
|
||||||
|
toggleLanguage: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LanguageContext = React.createContext<LanguageContextType>({
|
||||||
|
language: "en",
|
||||||
|
toggleLanguage: () => {},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const useLanguage = () => useContext(LanguageContext);
|
||||||
|
|
||||||
|
// --- Navigation ---
|
||||||
|
const Navigation: React.FC = () => {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const location = useLocation();
|
||||||
|
const { language, toggleLanguage } = useLanguage();
|
||||||
|
|
||||||
|
const isActive = (path: string) => {
|
||||||
|
if (path === "/research" && location.pathname.startsWith("/research")) {
|
||||||
|
return "text-ink font-semibold";
|
||||||
|
}
|
||||||
|
return location.pathname === path
|
||||||
|
? "text-ink font-semibold"
|
||||||
|
: "text-subtle hover:text-ink transition-colors";
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav className="sticky top-0 z-50 bg-paper/95 backdrop-blur-sm border-b border-gray-100">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="flex justify-between h-20">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Link to="/" className="flex items-center space-x-2">
|
||||||
|
<Cpu className="h-6 w-6 text-ink" />
|
||||||
|
<span className="font-sans tracking-widest text-sm font-bold uppercase text-ink">
|
||||||
|
Pradit
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Desktop Nav */}
|
||||||
|
<div className="hidden md:flex items-center space-x-8 font-sans text-sm">
|
||||||
|
<Link to="/" className={isActive("/")}>
|
||||||
|
{language === "en" ? "Work" : "ผลงาน"}
|
||||||
|
</Link>
|
||||||
|
<Link to="/services" className={isActive("/services")}>
|
||||||
|
{language === "en" ? "Services" : "บริการ"}
|
||||||
|
</Link>
|
||||||
|
<Link to="/research" className={isActive("/research")}>
|
||||||
|
{language === "en" ? "Research" : "วิจัย"}
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/playground"
|
||||||
|
className={`${isActive("/playground")} flex items-center gap-1`}
|
||||||
|
>
|
||||||
|
<Terminal size={14} />
|
||||||
|
{language === "en" ? "Playground" : "ลองเล่น"}
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/hire-us"
|
||||||
|
className="bg-ink text-white px-4 py-2 rounded-sm hover:bg-gray-800 transition-colors"
|
||||||
|
>
|
||||||
|
{language === "en" ? "Hire Us" : "ติดต่อเรา"}
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Language Toggle */}
|
||||||
|
<button
|
||||||
|
onClick={toggleLanguage}
|
||||||
|
className="flex items-center space-x-1 text-xs font-bold border border-gray-200 rounded-full px-3 py-1 hover:bg-gray-50 transition-colors"
|
||||||
|
>
|
||||||
|
<Globe size={14} className="text-subtle" />
|
||||||
|
<span className={language === "en" ? "text-ink" : "text-subtle"}>
|
||||||
|
EN
|
||||||
|
</span>
|
||||||
|
<span className="text-gray-300">|</span>
|
||||||
|
<span className={language === "th" ? "text-ink" : "text-subtle"}>
|
||||||
|
TH
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile button */}
|
||||||
|
<div className="md:hidden flex items-center gap-4">
|
||||||
|
<button
|
||||||
|
onClick={toggleLanguage}
|
||||||
|
className="flex items-center space-x-1 text-xs font-bold border border-gray-200 rounded-full px-3 py-1"
|
||||||
|
>
|
||||||
|
<span className={language === "en" ? "text-ink" : "text-subtle"}>
|
||||||
|
EN
|
||||||
|
</span>
|
||||||
|
<span className="text-gray-300">|</span>
|
||||||
|
<span className={language === "th" ? "text-ink" : "text-subtle"}>
|
||||||
|
TH
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button onClick={() => setIsOpen(!isOpen)} className="text-ink p-2">
|
||||||
|
{isOpen ? <X size={24} /> : <Menu size={24} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Menu */}
|
||||||
|
{isOpen && (
|
||||||
|
<div className="md:hidden bg-white border-b border-gray-100">
|
||||||
|
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||||
|
<Link
|
||||||
|
to="/"
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
className="block px-3 py-2 text-base font-medium text-ink"
|
||||||
|
>
|
||||||
|
Work
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/services"
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
className="block px-3 py-2 text-base font-medium text-subtle"
|
||||||
|
>
|
||||||
|
Services
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/research"
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
className="block px-3 py-2 text-base font-medium text-subtle"
|
||||||
|
>
|
||||||
|
Research
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/playground"
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
className="block px-3 py-2 text-base font-medium text-subtle"
|
||||||
|
>
|
||||||
|
Playground
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/hire-us"
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
className="block px-3 py-2 text-base font-medium text-ink font-bold"
|
||||||
|
>
|
||||||
|
Hire Us
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Footer: React.FC = () => {
|
||||||
|
const { language } = useLanguage();
|
||||||
|
return (
|
||||||
|
<footer className="bg-white border-t border-gray-100 py-12 mt-24">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||||
|
<div className="col-span-1 md:col-span-2">
|
||||||
|
<span className="font-sans tracking-widest text-xs font-bold uppercase text-ink">
|
||||||
|
Pradit
|
||||||
|
</span>
|
||||||
|
<p className="mt-4 text-subtle font-serif text-sm max-w-md">
|
||||||
|
{language === "en"
|
||||||
|
? "We build production-grade AI systems. No hype, just engineering. Specializing in LLM integration, custom evaluations, and scalable architecture."
|
||||||
|
: "เราสร้างระบบ AI ระดับใช้งานจริง เน้นวิศวกรรมไม่เน้นโฆษณา เชี่ยวชาญด้านการรวมระบบ LLM, การประเมินผล และสถาปัตยกรรมที่ปรับขนาดได้"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-sans font-bold text-xs uppercase tracking-wider mb-4">
|
||||||
|
Offerings
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2 text-sm text-subtle font-serif">
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="/services"
|
||||||
|
className="hover:text-ink hover:underline decoration-1 underline-offset-2"
|
||||||
|
>
|
||||||
|
MVP Development
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="/services"
|
||||||
|
className="hover:text-ink hover:underline decoration-1 underline-offset-2"
|
||||||
|
>
|
||||||
|
System Audits
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="/services"
|
||||||
|
className="hover:text-ink hover:underline decoration-1 underline-offset-2"
|
||||||
|
>
|
||||||
|
Custom Integration
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-sans font-bold text-xs uppercase tracking-wider mb-4">
|
||||||
|
Connect
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2 text-sm text-subtle font-serif">
|
||||||
|
<li>
|
||||||
|
<a href="#" className="hover:text-ink">
|
||||||
|
GitHub
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/playground" className="hover:text-ink">
|
||||||
|
Playground
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/hire-us" className="hover:text-ink">
|
||||||
|
Hire Us
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
const [language, setLanguage] = useState<Language>("en");
|
||||||
|
|
||||||
|
const toggleLanguage = () => {
|
||||||
|
setLanguage((prev) => (prev === "en" ? "th" : "en"));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LanguageContext.Provider value={{ language, toggleLanguage }}>
|
||||||
|
<HashRouter>
|
||||||
|
<div className="min-h-screen bg-paper flex flex-col relative">
|
||||||
|
<Navigation />
|
||||||
|
<main className="flex-grow">
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Home />} />
|
||||||
|
<Route path="/research" element={<Research />} />
|
||||||
|
<Route
|
||||||
|
path="/research/lora-without-regret"
|
||||||
|
element={<BlogPost />}
|
||||||
|
/>
|
||||||
|
<Route path="/services" element={<Services />} />
|
||||||
|
<Route path="/playground" element={<Playground />} />
|
||||||
|
<Route path="/hire-us" element={<HireUs />} />
|
||||||
|
</Routes>
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
<ChatWidget />
|
||||||
|
</div>
|
||||||
|
</HashRouter>
|
||||||
|
</LanguageContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
20
README.md
Normal file
20
README.md
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<div align="center">
|
||||||
|
<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
# Run and deploy your AI Studio app
|
||||||
|
|
||||||
|
This contains everything you need to run your app locally.
|
||||||
|
|
||||||
|
View your app in AI Studio: https://ai.studio/apps/drive/1lSdt9DucwKsU3WO83AD5ieLoPx_QLmVF
|
||||||
|
|
||||||
|
## Run Locally
|
||||||
|
|
||||||
|
**Prerequisites:** Node.js
|
||||||
|
|
||||||
|
|
||||||
|
1. Install dependencies:
|
||||||
|
`npm install`
|
||||||
|
2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
|
||||||
|
3. Run the app:
|
||||||
|
`npm run dev`
|
||||||
79
STYLE_GUIDE.md
Normal file
79
STYLE_GUIDE.md
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
# Pradit (ประดิษฐ์) Design System
|
||||||
|
|
||||||
|
**Philosophy:** "Engineer First, Sales Second."
|
||||||
|
The aesthetic of Pradit is minimal, precise, and reminiscent of technical documentation or a high-end code editor. It avoids gradients, heavy drop shadows, and stock photography in favor of clean typography, terminal-inspired visual elements, and high information density.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. Color Palette
|
||||||
|
|
||||||
|
We use a strict semantic color system.
|
||||||
|
|
||||||
|
| Token | Hex | Usage |
|
||||||
|
| :---------- | :-------- | :------------------------------------------------------------------------------- |
|
||||||
|
| **Paper** | `#fdfdfd` | Main background. Slightly off-white to reduce eye strain. |
|
||||||
|
| **Ink** | `#111111` | Primary text, strong headers, active states. |
|
||||||
|
| **Subtle** | `#666666` | Secondary text, metadata, descriptions. |
|
||||||
|
| **Accent** | `#2563eb` | Primary action color (Blue-600). Used sparingly for links and active indicators. |
|
||||||
|
| **Code Bg** | `#1e1e1e` | Dark background for terminal blocks and code snippets (VS Code Dark default). |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Typography
|
||||||
|
|
||||||
|
We use a tri-font stack to separate functional UI from reading content.
|
||||||
|
|
||||||
|
### Serif: Merriweather
|
||||||
|
|
||||||
|
_Usage:_ Long-form text, blog posts, titles, quotes.
|
||||||
|
_Why:_ Establishes authority and academic rigor.
|
||||||
|
|
||||||
|
### Sans-Serif: Inter
|
||||||
|
|
||||||
|
_Usage:_ UI labels, navigation, buttons, short descriptions.
|
||||||
|
_Why:_ Clean, legible, and modern.
|
||||||
|
|
||||||
|
### Monospace: Fira Code
|
||||||
|
|
||||||
|
_Usage:_ Code snippets, terminal inputs, tags, dates, metadata.
|
||||||
|
_Why:_ Signals technical precision.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. UI Patterns & Components
|
||||||
|
|
||||||
|
### The "Terminal" Aesthetic
|
||||||
|
|
||||||
|
Elements that represent "work" (code, search, inputs) should mimic terminal interfaces.
|
||||||
|
|
||||||
|
- **Inputs:** No rounded corners (or very slight `rounded-sm`). Bottom borders or dark backgrounds.
|
||||||
|
- **Prompt:** Use `>` or `$` prefixes for input labels.
|
||||||
|
|
||||||
|
### Borders over Shadows
|
||||||
|
|
||||||
|
Use 1px borders (`border-gray-200`) to define hierarchy. Shadows should be subtle and used only for floating elements (modals, sticky headers).
|
||||||
|
|
||||||
|
### Buttons
|
||||||
|
|
||||||
|
- **Primary:** `bg-ink` text-white, `rounded-sm`. Uppercase text, tracking-widest.
|
||||||
|
- **Secondary:** `border border-gray-200` text-ink.
|
||||||
|
- **Tags/Pills:** `rounded-full`, `uppercase`, `text-xs`, `font-bold`.
|
||||||
|
|
||||||
|
### Interactive Visualizations
|
||||||
|
|
||||||
|
Do not use static images for technical concepts. Use code blocks (`TerminalBlock`) or interactive React components (`MatrixViz`) that allow the user to manipulate variables.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Layout Grid
|
||||||
|
|
||||||
|
- **Container:** Max-width 7xl (`max-w-7xl`) centered.
|
||||||
|
- **Spacing:** Generous vertical whitespace (`py-24`).
|
||||||
|
- **Columns:** 12-column grid for complex layouts (Sidebar takes 3, Content takes 6-9).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Voice & Tone
|
||||||
|
|
||||||
|
- **English:** Professional, concise, jargon-correct. No marketing fluff.
|
||||||
|
- **Thai:** Formal but accessible. Use English terms for specific technical concepts (e.g., "Fine-tuning", "Latency") where a Thai translation would be ambiguous.
|
||||||
110
components/ChatWidget.tsx
Normal file
110
components/ChatWidget.tsx
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
import React, { useState, useRef, useEffect } from 'react';
|
||||||
|
import { MessageSquare, X, Send, Terminal } from 'lucide-react';
|
||||||
|
|
||||||
|
interface Message {
|
||||||
|
id: string;
|
||||||
|
text: string;
|
||||||
|
sender: 'user' | 'bot';
|
||||||
|
timestamp: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ChatWidget: React.FC = () => {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [messages, setMessages] = useState<Message[]>([
|
||||||
|
{ id: '1', text: "System online. I am Pradit's automated assistant. How can I help you engineer your next AI system?", sender: 'bot', timestamp: new Date() }
|
||||||
|
]);
|
||||||
|
const [input, setInput] = useState("");
|
||||||
|
const bottomRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen) {
|
||||||
|
bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||||
|
}
|
||||||
|
}, [messages, isOpen]);
|
||||||
|
|
||||||
|
const handleSend = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!input.trim()) return;
|
||||||
|
|
||||||
|
const userMsg: Message = { id: Date.now().toString(), text: input, sender: 'user', timestamp: new Date() };
|
||||||
|
setMessages(prev => [...prev, userMsg]);
|
||||||
|
setInput("");
|
||||||
|
|
||||||
|
// Mock response
|
||||||
|
setTimeout(() => {
|
||||||
|
const botMsg: Message = {
|
||||||
|
id: (Date.now() + 1).toString(),
|
||||||
|
text: "ACK. Request received. Our engineers are currently optimizing a training run. Please visit 'Hire Us' to schedule a deep dive consultation.",
|
||||||
|
sender: 'bot',
|
||||||
|
timestamp: new Date()
|
||||||
|
};
|
||||||
|
setMessages(prev => [...prev, botMsg]);
|
||||||
|
}, 800);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed bottom-6 right-6 z-50 font-sans">
|
||||||
|
{/* Chat Window */}
|
||||||
|
{isOpen && (
|
||||||
|
<div className="mb-4 w-[320px] md:w-[360px] bg-white rounded-sm shadow-2xl border border-gray-200 flex flex-col overflow-hidden animate-in slide-in-from-bottom-10 fade-in duration-200">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="bg-[#1e1e1e] text-white p-4 flex items-center justify-between border-b border-gray-800">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="p-1 bg-green-500/20 rounded-sm">
|
||||||
|
<Terminal size={16} className="text-green-400" />
|
||||||
|
</div>
|
||||||
|
<span className="text-xs font-mono font-bold tracking-wider uppercase text-gray-200">Pradit/Assistant</span>
|
||||||
|
</div>
|
||||||
|
<button onClick={() => setIsOpen(false)} className="text-gray-400 hover:text-white transition-colors">
|
||||||
|
<X size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Messages */}
|
||||||
|
<div className="h-[350px] overflow-y-auto p-4 bg-[#fdfdfd] space-y-4">
|
||||||
|
{messages.map((msg) => (
|
||||||
|
<div key={msg.id} className={`flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}>
|
||||||
|
<div className={`max-w-[85%] p-3 rounded-sm text-sm font-serif leading-relaxed ${
|
||||||
|
msg.sender === 'user'
|
||||||
|
? 'bg-gray-100 text-ink border border-gray-200'
|
||||||
|
: 'bg-white text-subtle border border-gray-100 shadow-sm'
|
||||||
|
}`}>
|
||||||
|
{msg.text}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div ref={bottomRef} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Input */}
|
||||||
|
<form onSubmit={handleSend} className="p-3 bg-white border-t border-gray-200 flex gap-2">
|
||||||
|
<div className="flex-grow flex items-center bg-gray-50 border border-gray-200 px-3 py-2 rounded-sm focus-within:border-ink focus-within:ring-1 focus-within:ring-ink/5 transition-all">
|
||||||
|
<span className="text-gray-400 mr-2 text-xs font-mono">{">"}</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={input}
|
||||||
|
onChange={(e) => setInput(e.target.value)}
|
||||||
|
placeholder="Type your query..."
|
||||||
|
className="flex-grow bg-transparent text-sm outline-none text-ink placeholder:text-gray-400 font-sans"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button type="submit" className="bg-ink text-white p-2 rounded-sm hover:bg-gray-800 transition-colors flex items-center justify-center">
|
||||||
|
<Send size={16} />
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Toggle Button */}
|
||||||
|
{!isOpen && (
|
||||||
|
<button
|
||||||
|
onClick={() => setIsOpen(true)}
|
||||||
|
className="group flex items-center gap-2 bg-ink hover:bg-gray-800 text-white pl-4 pr-5 py-3 rounded-full shadow-lg transition-all hover:scale-105"
|
||||||
|
>
|
||||||
|
<MessageSquare size={20} className="text-gray-300 group-hover:text-white transition-colors" />
|
||||||
|
<span className="font-bold text-sm tracking-wide">Chat</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
164
components/MatrixViz.tsx
Normal file
164
components/MatrixViz.tsx
Normal file
@ -0,0 +1,164 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { Sliders } from "lucide-react";
|
||||||
|
|
||||||
|
export const MatrixViz: React.FC = () => {
|
||||||
|
const [rank, setRank] = useState(4);
|
||||||
|
|
||||||
|
// Constants for visualization scaling
|
||||||
|
const d = 16; // Hidden dimension simulation
|
||||||
|
const k = 16; // Output dimension simulation
|
||||||
|
|
||||||
|
// Calculate imaginary parameters based on user slider
|
||||||
|
// Assuming a real model like Llama-7B, d_model might be 4096.
|
||||||
|
// We scale the display numbers to look realistic.
|
||||||
|
const realD = 4096;
|
||||||
|
const realK = 4096;
|
||||||
|
|
||||||
|
const paramsFull = realD * realK;
|
||||||
|
const paramsLoRA = realD * rank + rank * realK;
|
||||||
|
const reduction = ((1 - paramsLoRA / paramsFull) * 100).toFixed(2);
|
||||||
|
|
||||||
|
// Helper to generate random opacity blue blocks
|
||||||
|
const renderGrid = (
|
||||||
|
rows: number,
|
||||||
|
cols: number,
|
||||||
|
colorBase: string,
|
||||||
|
label: string,
|
||||||
|
) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="relative transition-all duration-300 ease-in-out"
|
||||||
|
style={{
|
||||||
|
display: "grid",
|
||||||
|
gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
|
||||||
|
gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
|
||||||
|
width: `${cols * 6}px`,
|
||||||
|
height: `${rows * 6}px`,
|
||||||
|
border: "1px solid #e5e7eb",
|
||||||
|
backgroundColor: "#f9fafb",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{Array.from({ length: rows * cols }).map((_, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
style={{
|
||||||
|
backgroundColor: colorBase,
|
||||||
|
opacity: Math.random() * 0.6 + 0.2,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Matrix Label Overlay */}
|
||||||
|
<div className="absolute -bottom-6 left-0 w-full text-center text-[10px] font-mono text-gray-500">
|
||||||
|
{label}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="my-12 font-sans bg-gray-50 border border-gray-200 rounded-lg p-8">
|
||||||
|
<div className="flex flex-col md:flex-row items-start md:items-center justify-between mb-8 gap-6">
|
||||||
|
<div>
|
||||||
|
<h4 className="font-bold text-sm uppercase tracking-widest text-ink flex items-center gap-2">
|
||||||
|
<Sliders size={16} />
|
||||||
|
Interactive Decomposition
|
||||||
|
</h4>
|
||||||
|
<p className="text-xs text-subtle mt-1 max-w-md">
|
||||||
|
Adjust the Rank (r) to see how LoRA decomposes the weight update
|
||||||
|
matrix into two smaller dense matrices.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4 bg-white p-3 rounded-md border border-gray-200 shadow-sm">
|
||||||
|
<label
|
||||||
|
htmlFor="rank-slider"
|
||||||
|
className="text-xs font-bold text-ink uppercase"
|
||||||
|
>
|
||||||
|
Rank (r): {rank}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="rank-slider"
|
||||||
|
type="range"
|
||||||
|
min="1"
|
||||||
|
max="16"
|
||||||
|
step="1"
|
||||||
|
value={rank}
|
||||||
|
onChange={(e) => setRank(parseInt(e.target.value))}
|
||||||
|
className="w-32 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-accent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap items-center justify-center gap-4 md:gap-12 overflow-x-auto py-4 min-h-[200px]">
|
||||||
|
{/* Matrix B (d x r) */}
|
||||||
|
<div className="flex flex-col items-center group">
|
||||||
|
<div className="mb-2 text-xs font-mono text-blue-600 font-bold">
|
||||||
|
B
|
||||||
|
</div>
|
||||||
|
{renderGrid(16, rank, "#93c5fd", `${realD} × ${rank}`)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-lg text-gray-400 font-light">×</div>
|
||||||
|
|
||||||
|
{/* Matrix A (r x k) */}
|
||||||
|
<div className="flex flex-col items-center group">
|
||||||
|
<div className="mb-2 text-xs font-mono text-blue-700 font-bold">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
{renderGrid(rank, 16, "#2563eb", `${rank} × ${realK}`)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Arrow */}
|
||||||
|
<div className="text-lg text-gray-400 font-light">⟶</div>
|
||||||
|
|
||||||
|
{/* Matrix Delta W */}
|
||||||
|
<div className="flex flex-col items-center opacity-50 grayscale">
|
||||||
|
<div className="mb-2 text-xs font-mono text-green-600 font-bold">
|
||||||
|
ΔW
|
||||||
|
</div>
|
||||||
|
{renderGrid(16, 16, "#4ade80", `${realD} × ${realK}`)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Math Dashboard */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8 border-t border-gray-200 pt-6">
|
||||||
|
<div className="bg-white p-4 rounded border border-gray-100">
|
||||||
|
<div className="text-[10px] uppercase tracking-widest text-subtle mb-1">
|
||||||
|
Trainable Params (LoRA)
|
||||||
|
</div>
|
||||||
|
<div className="font-mono text-xl text-blue-600 font-bold">
|
||||||
|
{paramsLoRA.toLocaleString()}
|
||||||
|
</div>
|
||||||
|
<div className="text-[10px] text-gray-400 font-mono mt-1">
|
||||||
|
({realD}×{rank}) + ({rank}×{realK})
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white p-4 rounded border border-gray-100">
|
||||||
|
<div className="text-[10px] uppercase tracking-widest text-subtle mb-1">
|
||||||
|
Trainable Params (Full)
|
||||||
|
</div>
|
||||||
|
<div className="font-mono text-xl text-gray-400">
|
||||||
|
{paramsFull.toLocaleString()}
|
||||||
|
</div>
|
||||||
|
<div className="text-[10px] text-gray-400 font-mono mt-1">
|
||||||
|
{realD} × {realK}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-green-50 p-4 rounded border border-green-100">
|
||||||
|
<div className="text-[10px] uppercase tracking-widest text-green-800 mb-1">
|
||||||
|
Memory Reduction
|
||||||
|
</div>
|
||||||
|
<div className="font-mono text-xl text-green-600 font-bold">
|
||||||
|
{reduction}%
|
||||||
|
</div>
|
||||||
|
<div className="text-[10px] text-green-700 font-mono mt-1">
|
||||||
|
More VRAM for batch size
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
94
components/TerminalBlock.tsx
Normal file
94
components/TerminalBlock.tsx
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
interface TerminalBlockProps {
|
||||||
|
title?: string;
|
||||||
|
lines: string[];
|
||||||
|
className?: string;
|
||||||
|
typingEffect?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const TerminalBlock: React.FC<TerminalBlockProps> = ({
|
||||||
|
title = "bash",
|
||||||
|
lines,
|
||||||
|
className,
|
||||||
|
typingEffect = false,
|
||||||
|
}) => {
|
||||||
|
const [displayedLines, setDisplayedLines] = useState<string[]>(
|
||||||
|
typingEffect ? [] : lines,
|
||||||
|
);
|
||||||
|
const [currentLineIndex, setCurrentLineIndex] = useState(0);
|
||||||
|
const [currentCharIndex, setCurrentCharIndex] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!typingEffect) return;
|
||||||
|
|
||||||
|
if (currentLineIndex < lines.length) {
|
||||||
|
const currentLineFull = lines[currentLineIndex];
|
||||||
|
|
||||||
|
if (currentCharIndex < currentLineFull.length) {
|
||||||
|
const timeout = setTimeout(
|
||||||
|
() => {
|
||||||
|
setDisplayedLines((prev) => {
|
||||||
|
const newLines = [...prev];
|
||||||
|
if (newLines[currentLineIndex] === undefined) {
|
||||||
|
newLines[currentLineIndex] = currentLineFull[currentCharIndex];
|
||||||
|
} else {
|
||||||
|
newLines[currentLineIndex] += currentLineFull[currentCharIndex];
|
||||||
|
}
|
||||||
|
return newLines;
|
||||||
|
});
|
||||||
|
setCurrentCharIndex((prev) => prev + 1);
|
||||||
|
},
|
||||||
|
15 + Math.random() * 20,
|
||||||
|
); // Random variance for realism
|
||||||
|
|
||||||
|
return () => clearTimeout(timeout);
|
||||||
|
} else {
|
||||||
|
// Line finished, wait a bit then move to next
|
||||||
|
const timeout = setTimeout(() => {
|
||||||
|
setCurrentLineIndex((prev) => prev + 1);
|
||||||
|
setCurrentCharIndex(0);
|
||||||
|
}, 300);
|
||||||
|
return () => clearTimeout(timeout);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [typingEffect, lines, currentLineIndex, currentCharIndex]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`rounded-md overflow-hidden bg-[#1e1e1e] shadow-xl border border-gray-800 ${className}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center px-4 py-2 bg-[#252526] border-b border-gray-700">
|
||||||
|
<div className="flex space-x-2 mr-4">
|
||||||
|
<div className="w-3 h-3 rounded-full bg-red-500"></div>
|
||||||
|
<div className="w-3 h-3 rounded-full bg-yellow-500"></div>
|
||||||
|
<div className="w-3 h-3 rounded-full bg-green-500"></div>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-400 font-mono">{title}</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 font-mono text-sm leading-relaxed min-h-[200px]">
|
||||||
|
{displayedLines.map((line, idx) => (
|
||||||
|
<div key={idx} className="text-gray-300 break-words">
|
||||||
|
{line.startsWith("$") ? (
|
||||||
|
<span className="text-green-400">{line}</span>
|
||||||
|
) : line.startsWith(">") ? (
|
||||||
|
<span className="text-blue-400 ml-4">{line}</span>
|
||||||
|
) : line.startsWith("#") ? (
|
||||||
|
<span className="text-gray-500 italic">{line}</span>
|
||||||
|
) : (
|
||||||
|
<span className="text-gray-300">{line}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{/* Cursor */}
|
||||||
|
{typingEffect && currentLineIndex < lines.length && (
|
||||||
|
<div className="animate-pulse inline-block w-2 h-4 bg-gray-500 align-middle ml-1"></div>
|
||||||
|
)}
|
||||||
|
{/* Static Cursor when done */}
|
||||||
|
{(!typingEffect || currentLineIndex >= lines.length) && (
|
||||||
|
<div className="animate-pulse mt-2 inline-block w-2 h-4 bg-gray-500 align-middle"></div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
66
index.html
Normal file
66
index.html
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Pradit | AI Consultancy</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Inter', 'sans-serif'],
|
||||||
|
serif: ['Merriweather', 'serif'],
|
||||||
|
mono: ['Fira Code', 'monospace'],
|
||||||
|
},
|
||||||
|
colors: {
|
||||||
|
paper: '#fdfdfd',
|
||||||
|
ink: '#111111',
|
||||||
|
subtle: '#666666',
|
||||||
|
accent: '#2563eb',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #fdfdfd;
|
||||||
|
color: #111111;
|
||||||
|
}
|
||||||
|
/* Custom scrollbar for code blocks */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #888;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #555;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script type="importmap">
|
||||||
|
{
|
||||||
|
"imports": {
|
||||||
|
"react": "https://aistudiocdn.com/react@^19.2.0",
|
||||||
|
"react/": "https://aistudiocdn.com/react@^19.2.0/",
|
||||||
|
"react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
|
||||||
|
"react-router-dom": "https://aistudiocdn.com/react-router-dom@^7.9.6",
|
||||||
|
"lucide-react": "https://aistudiocdn.com/lucide-react@^0.554.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<link rel="stylesheet" href="/index.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/index.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
index.tsx
Normal file
15
index.tsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
const rootElement = document.getElementById('root');
|
||||||
|
if (!rootElement) {
|
||||||
|
throw new Error("Could not find root element to mount to");
|
||||||
|
}
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(rootElement);
|
||||||
|
root.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
5
metadata.json
Normal file
5
metadata.json
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"name": "Pradit",
|
||||||
|
"description": "A high-end, academic-style technical consultancy website featuring technical deep dives and clear service offerings.",
|
||||||
|
"requestFramePermissions": []
|
||||||
|
}
|
||||||
23
package.json
Normal file
23
package.json
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"name": "pradit",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^19.2.0",
|
||||||
|
"react-dom": "^19.2.0",
|
||||||
|
"react-router-dom": "^7.9.6",
|
||||||
|
"lucide-react": "^0.554.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^22.14.0",
|
||||||
|
"@vitejs/plugin-react": "^5.0.0",
|
||||||
|
"typescript": "~5.8.2",
|
||||||
|
"vite": "^6.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
444
pages/BlogPost.tsx
Normal file
444
pages/BlogPost.tsx
Normal file
@ -0,0 +1,444 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { MatrixViz } from "../components/MatrixViz";
|
||||||
|
import { useLanguage } from "../App";
|
||||||
|
import {
|
||||||
|
Play,
|
||||||
|
Pause,
|
||||||
|
FileText,
|
||||||
|
Headphones,
|
||||||
|
Zap,
|
||||||
|
Volume2,
|
||||||
|
X,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
export const BlogPost: React.FC = () => {
|
||||||
|
const { language } = useLanguage();
|
||||||
|
const [activeSection, setActiveSection] = useState("intro");
|
||||||
|
const [activeTab, setActiveTab] = useState<"read" | "listen">("read");
|
||||||
|
const [isPlaying, setIsPlaying] = useState(false);
|
||||||
|
const [showMiniPlayer, setShowMiniPlayer] = useState(false);
|
||||||
|
|
||||||
|
// Simple scroll spy logic
|
||||||
|
useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
const sections = ["intro", "methods", "results", "discussion"];
|
||||||
|
for (const section of sections) {
|
||||||
|
const element = document.getElementById(section);
|
||||||
|
if (element) {
|
||||||
|
const rect = element.getBoundingClientRect();
|
||||||
|
if (rect.top >= 0 && rect.top <= 300) {
|
||||||
|
setActiveSection(section);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
window.addEventListener("scroll", handleScroll);
|
||||||
|
return () => window.removeEventListener("scroll", handleScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleMainPlayPause = () => {
|
||||||
|
const newState = !isPlaying;
|
||||||
|
setIsPlaying(newState);
|
||||||
|
if (newState) {
|
||||||
|
setShowMiniPlayer(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const content = {
|
||||||
|
en: {
|
||||||
|
title: "LoRA Without Regret",
|
||||||
|
subtitle: "John Schulman in collaboration with Pradit",
|
||||||
|
date: "Sep 29, 2025",
|
||||||
|
tldr_title: "Executive Summary (TL;DR)",
|
||||||
|
tldr_text:
|
||||||
|
"Low-Rank Adaptation (LoRA) is a technique to fine-tune large models efficiently. Our research confirms that while LoRA saves 90% of memory, it can match full fine-tuning performance only if the rank (r) is sufficiently high and alpha scaling is tuned correctly. Ideal for post-training but not pre-training.",
|
||||||
|
tabs: { read: "Read Article", listen: "Listen (TTS)" },
|
||||||
|
intro_1:
|
||||||
|
"Today’s leading language models contain upwards of a trillion parameters, pretrained on tens of trillions of tokens. Base model performance keeps improving with scale, as these trillions are necessary for learning and representing all the patterns in written-down human knowledge.",
|
||||||
|
intro_2:
|
||||||
|
"In contrast, post-training involves smaller datasets and generally focuses on narrower domains of knowledge and ranges of behavior. It seems wasteful to use a terabit of weights to represent updates from a gigabit or megabit of training data. This intuition has motivated parameter efficient fine-tuning (PEFT), which adjusts a large network by updating a much smaller set of parameters.",
|
||||||
|
method_title: "The Method",
|
||||||
|
method_1:
|
||||||
|
"The leading PEFT method is low-rank adaptation, or LoRA. LoRA replaces each weight matrix W from the original model with a modified version W' = W + γBA, where B and A are matrices that together have far fewer parameters than W, and γ is a constant scaling factor.",
|
||||||
|
method_2:
|
||||||
|
"In effect, LoRA creates a low-dimensional representation of the updates imparted by fine-tuning. LoRA may offer advantages in the cost and speed of post-training, and there are also a few operational reasons to prefer it to full fine-tuning.",
|
||||||
|
results_title: "Operational Advantages",
|
||||||
|
results_list: [
|
||||||
|
{
|
||||||
|
title: "Multi-tenant serving",
|
||||||
|
text: "Since LoRA trains an adapter (i.e., the A and B matrices) while keeping the original weights unchanged, a single inference server can keep many adapters in memory.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Layout size for training",
|
||||||
|
text: "FullFT usually requires an order of magnitude more accelerators than sampling from the same model does.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Ease of loading",
|
||||||
|
text: "With fewer weights to store, LoRA adapters are fast and easy to set up or transfer between machines.",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
conclusion_title: "Conclusion",
|
||||||
|
conclusion_text:
|
||||||
|
"The question remains: can LoRA match the performance of full fine-tuning? Our internal benchmarks suggest yes, provided rank scaling is carefully managed.",
|
||||||
|
nav: {
|
||||||
|
intro: "Introduction",
|
||||||
|
methods: "Methods",
|
||||||
|
results: "Results",
|
||||||
|
discussion: "Conclusion",
|
||||||
|
},
|
||||||
|
now_playing: "Now Playing",
|
||||||
|
paused: "Paused",
|
||||||
|
transcript_title: "Transcript",
|
||||||
|
},
|
||||||
|
th: {
|
||||||
|
title: "LoRA โดยไม่เสียใจ",
|
||||||
|
subtitle: "John Schulman ร่วมกับ Pradit (ประดิษฐ์)",
|
||||||
|
date: "29 กันยายน 2025",
|
||||||
|
tldr_title: "บทสรุปผู้บริหาร (TL;DR)",
|
||||||
|
tldr_text:
|
||||||
|
"Low-Rank Adaptation (LoRA) เป็นเทคนิคการปรับแต่งโมเดลขนาดใหญ่ที่มีประสิทธิภาพ งานวิจัยของเรายืนยันว่าแม้ LoRA จะประหยัดหน่วยความจำได้ถึง 90% แต่จะให้ผลลัพธ์เทียบเท่าการ Fine-tune แบบเต็มรูปแบบได้ก็ต่อเมื่อค่า Rank (r) สูงเพียงพอและมีการปรับค่า Alpha อย่างถูกต้อง เหมาะสำหรับขั้นตอน Post-training แต่ไม่เหมาะกับ Pre-training",
|
||||||
|
tabs: { read: "อ่านบทความ", listen: "ฟังเสียงบรรยาย" },
|
||||||
|
intro_1:
|
||||||
|
"โมเดลภาษาชั้นนำในปัจจุบันมีพารามิเตอร์มากกว่าล้านล้านตัว ผ่านการฝึกฝนบนข้อมูลมหาศาล ประสิทธิภาพของโมเดลพื้นฐานดีขึ้นเรื่อยๆ ตามขนาด ซึ่งจำเป็นสำหรับการเรียนรู้รูปแบบความรู้ทั้งหมดของมนุษย์",
|
||||||
|
intro_2:
|
||||||
|
"ในทางตรงกันข้าม การฝึกฝนหลังเสร็จสิ้น (Post-training) มักใช้ชุดข้อมูลขนาดเล็กและเน้นขอบเขตความรู้ที่แคบกว่า ดูเหมือนจะสิ้นเปลืองที่จะใช้น้ำหนักระดับเทราบิตเพื่อแทนการอัปเดตจากข้อมูลเพียงกิกะบิต แนวคิดนี้จึงนำไปสู่การปรับแต่งแบบประหยัดพารามิเตอร์ (PEFT)",
|
||||||
|
method_title: "วิธีการ",
|
||||||
|
method_1:
|
||||||
|
"วิธี PEFT ชั้นนำคือ Low-rank adaptation หรือ LoRA ซึ่งแทนที่เมทริกซ์น้ำหนัก W แต่ละตัวด้วยเวอร์ชันแก้ไข W' = W + γBA โดยที่ B และ A เป็นเมทริกซ์ที่มีพารามิเตอร์น้อยกว่า W มาก",
|
||||||
|
method_2:
|
||||||
|
"โดยสรุป LoRA สร้างตัวแทนมิติที่ต่ำกว่าของการอัปเดตที่เกิดจากการ Fine-tuning LoRA อาจมีข้อได้เปรียบในด้านต้นทุนและความเร็ว และยังมีเหตุผลด้านการปฏิบัติงานที่ทำให้เป็นที่นิยมมากกว่า Full Fine-tuning",
|
||||||
|
results_title: "ข้อได้เปรียบด้านการปฏิบัติงาน",
|
||||||
|
results_list: [
|
||||||
|
{
|
||||||
|
title: "การให้บริการแบบ Multi-tenant",
|
||||||
|
text: "เนื่องจาก LoRA ฝึกฝน Adapter (เมทริกซ์ A และ B) โดยไม่เปลี่ยนน้ำหนักเดิม เซิร์ฟเวอร์เดียวจึงสามารถเก็บ Adapter หลายตัวในหน่วยความจำได้",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ขนาด Layout สำหรับการฝึก",
|
||||||
|
text: "FullFT มักต้องการตัวเร่งความเร็ว (GPU/TPU) มากกว่าการสุ่มตัวอย่างจากโมเดลเดียวกันถึงหนึ่งระดับ (Order of magnitude)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ความง่ายในการโหลด",
|
||||||
|
text: "ด้วยน้ำหนักที่ต้องเก็บน้อยกว่า LoRA adapters จึงตั้งค่าและโอนย้ายระหว่างเครื่องได้รวดเร็ว",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
conclusion_title: "บทสรุป",
|
||||||
|
conclusion_text:
|
||||||
|
"คำถามยังคงอยู่: LoRA สามารถทำงานได้เทียบเท่ากับ Full Fine-tuning หรือไม่? การทดสอบภายในของเราชี้ว่า 'ได้' หากมีการจัดการ Rank scaling อย่างระมัดระวัง",
|
||||||
|
nav: {
|
||||||
|
intro: "บทนำ",
|
||||||
|
methods: "วิธีการ",
|
||||||
|
results: "ผลลัพธ์",
|
||||||
|
discussion: "บทสรุป",
|
||||||
|
},
|
||||||
|
now_playing: "กำลังเล่น",
|
||||||
|
paused: "หยุดชั่วคราว",
|
||||||
|
transcript_title: "คำบรรยาย",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const t = content[language];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-paper min-h-screen pb-24 relative">
|
||||||
|
{/* Article Header */}
|
||||||
|
<header className="pt-24 pb-8 max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h1 className="font-serif text-4xl md:text-5xl text-ink leading-tight mb-6">
|
||||||
|
{t.title}
|
||||||
|
</h1>
|
||||||
|
<div className="font-sans text-sm text-subtle uppercase tracking-widest mb-2">
|
||||||
|
{t.subtitle}
|
||||||
|
</div>
|
||||||
|
<time className="font-serif italic text-subtle">{t.date}</time>
|
||||||
|
|
||||||
|
{/* View Tabs */}
|
||||||
|
<div className="flex justify-center mt-12 mb-8">
|
||||||
|
<div className="inline-flex bg-gray-100 p-1 rounded-lg border border-gray-200">
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab("read")}
|
||||||
|
className={`flex items-center px-6 py-2 rounded-md text-sm font-bold transition-all ${activeTab === "read" ? "bg-white text-ink shadow-sm" : "text-subtle hover:text-ink"}`}
|
||||||
|
>
|
||||||
|
<FileText size={16} className="mr-2" />
|
||||||
|
{t.tabs.read}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab("listen")}
|
||||||
|
className={`flex items-center px-6 py-2 rounded-md text-sm font-bold transition-all ${activeTab === "listen" ? "bg-white text-ink shadow-sm" : "text-subtle hover:text-ink"}`}
|
||||||
|
>
|
||||||
|
<Headphones size={16} className="mr-2" />
|
||||||
|
{t.tabs.listen}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* TL;DR Section */}
|
||||||
|
<div className="max-w-4xl mx-auto px-6 mb-12">
|
||||||
|
<div className="bg-blue-50 border border-blue-100 p-6 md:p-8 rounded-sm relative overflow-hidden">
|
||||||
|
<div className="absolute top-0 left-0 w-1 h-full bg-accent"></div>
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="bg-white p-2 rounded-full shadow-sm text-accent shrink-0 mt-1">
|
||||||
|
<Zap size={20} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-sans font-bold text-xs uppercase tracking-widest text-accent mb-2">
|
||||||
|
{t.tldr_title}
|
||||||
|
</h3>
|
||||||
|
<p className="font-serif text-ink leading-relaxed text-base md:text-lg">
|
||||||
|
{t.tldr_text}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{activeTab === "listen" ? (
|
||||||
|
/* Voice Interface */
|
||||||
|
<div className="max-w-5xl mx-auto px-4 sm:px-6 animate-in fade-in zoom-in duration-300">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
{/* Left: Sticky Player */}
|
||||||
|
<div className="md:sticky md:top-32 h-fit">
|
||||||
|
<div className="bg-[#1e1e1e] rounded-xl p-8 text-center shadow-2xl border border-gray-800">
|
||||||
|
<div className="w-20 h-20 bg-gray-800 rounded-full mx-auto mb-6 flex items-center justify-center shadow-inner relative">
|
||||||
|
{isPlaying && (
|
||||||
|
<span className="absolute w-full h-full rounded-full border-2 border-green-500 animate-ping opacity-20"></span>
|
||||||
|
)}
|
||||||
|
<Headphones size={28} className="text-gray-400" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="text-white font-serif text-xl mb-2">
|
||||||
|
{t.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-400 font-mono text-[10px] mb-8">
|
||||||
|
Voice: Gemini 2.5 Flash TTS
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Fake Waveform */}
|
||||||
|
<div className="h-12 flex items-center justify-center gap-1 mb-8 px-4 overflow-hidden">
|
||||||
|
{[...Array(30)].map((_, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={`w-1 bg-green-500 transition-all duration-150 rounded-full ${isPlaying ? "animate-pulse" : ""}`}
|
||||||
|
style={{
|
||||||
|
height: isPlaying ? `${Math.random() * 100}%` : "10%",
|
||||||
|
opacity: isPlaying ? 1 : 0.3,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-center gap-6">
|
||||||
|
<button className="text-gray-400 hover:text-white transition-colors font-mono text-xs">
|
||||||
|
1.0x
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleMainPlayPause}
|
||||||
|
className="w-14 h-14 bg-white rounded-full flex items-center justify-center hover:scale-105 transition-transform text-black shadow-lg"
|
||||||
|
>
|
||||||
|
{isPlaying ? (
|
||||||
|
<Pause fill="black" size={20} />
|
||||||
|
) : (
|
||||||
|
<Play fill="black" size={20} className="ml-1" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
<button className="text-gray-400 hover:text-white transition-colors font-mono text-xs">
|
||||||
|
-15s
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right: Scrollable Transcript */}
|
||||||
|
<div className="flex flex-col h-[600px]">
|
||||||
|
<div className="font-sans text-xs font-bold uppercase tracking-widest text-subtle mb-4 flex items-center gap-2">
|
||||||
|
<FileText size={14} /> {t.transcript_title}
|
||||||
|
</div>
|
||||||
|
<div className="flex-grow overflow-y-auto pr-4 space-y-6 text-subtle font-serif leading-relaxed border-l-2 border-gray-100 pl-6 custom-scrollbar">
|
||||||
|
<p className="text-ink font-medium">{t.intro_1}</p>
|
||||||
|
<p>{t.intro_2}</p>
|
||||||
|
<div className="h-px bg-gray-100 w-full my-4"></div>
|
||||||
|
<p className="text-xs font-sans font-bold text-gray-400 uppercase">
|
||||||
|
{t.method_title}
|
||||||
|
</p>
|
||||||
|
<p>{t.method_1}</p>
|
||||||
|
<p>{t.method_2}</p>
|
||||||
|
<div className="h-px bg-gray-100 w-full my-4"></div>
|
||||||
|
<p className="text-xs font-sans font-bold text-gray-400 uppercase">
|
||||||
|
{t.results_title}
|
||||||
|
</p>
|
||||||
|
{t.results_list.map((item, idx) => (
|
||||||
|
<p key={idx}>
|
||||||
|
<strong className="text-gray-700">{item.title}:</strong>{" "}
|
||||||
|
{item.text}
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
<div className="h-px bg-gray-100 w-full my-4"></div>
|
||||||
|
<p>{t.conclusion_text}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
/* Read Interface */
|
||||||
|
<main className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-12 gap-12 pb-20">
|
||||||
|
{/* Left Sidebar - TOC */}
|
||||||
|
<aside className="hidden lg:block lg:col-span-3 relative">
|
||||||
|
<nav className="sticky top-32 space-y-4">
|
||||||
|
<ul className="font-serif text-sm text-subtle space-y-3 border-l border-gray-200 pl-4">
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#intro"
|
||||||
|
className={`block transition-colors ${activeSection === "intro" ? "text-ink font-bold" : "hover:text-ink"}`}
|
||||||
|
>
|
||||||
|
{t.nav.intro}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#methods"
|
||||||
|
className={`block transition-colors ${activeSection === "methods" ? "text-ink font-bold" : "hover:text-ink"}`}
|
||||||
|
>
|
||||||
|
{t.nav.methods}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#results"
|
||||||
|
className={`block transition-colors ${activeSection === "results" ? "text-ink font-bold" : "hover:text-ink"}`}
|
||||||
|
>
|
||||||
|
{t.nav.results}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#discussion"
|
||||||
|
className={`block transition-colors ${activeSection === "discussion" ? "text-ink font-bold" : "hover:text-ink"}`}
|
||||||
|
>
|
||||||
|
{t.nav.discussion}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<article className="col-span-1 lg:col-span-6 font-serif text-lg leading-relaxed text-gray-800">
|
||||||
|
<MatrixViz />
|
||||||
|
|
||||||
|
<section id="intro" className="mb-12">
|
||||||
|
<p className="mb-6 first-letter:float-left first-letter:text-7xl first-letter:pr-4 first-letter:font-bold first-letter:text-ink">
|
||||||
|
{t.intro_1}
|
||||||
|
</p>
|
||||||
|
<p className="mb-6">{t.intro_2}</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="methods" className="mb-12">
|
||||||
|
<h2 className="font-sans font-bold text-xl text-ink mt-12 mb-6">
|
||||||
|
{t.method_title}
|
||||||
|
</h2>
|
||||||
|
<p className="mb-6">{t.method_1}</p>
|
||||||
|
<p className="mb-6">{t.method_2}</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="results" className="mb-12">
|
||||||
|
<h3 className="font-sans font-bold text-lg text-ink mt-8 mb-4">
|
||||||
|
{t.results_title}
|
||||||
|
</h3>
|
||||||
|
<ul className="list-disc list-outside ml-6 space-y-4 mb-6 text-base">
|
||||||
|
{t.results_list.map((item, idx) => (
|
||||||
|
<li key={idx}>
|
||||||
|
<strong className="text-ink">{item.title}.</strong>{" "}
|
||||||
|
{item.text}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="discussion" className="mb-12">
|
||||||
|
<h2 className="font-sans font-bold text-xl text-ink mt-12 mb-6">
|
||||||
|
{t.conclusion_title}
|
||||||
|
</h2>
|
||||||
|
<p className="mb-6">{t.conclusion_text}</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
{/* Right Sidebar - Footnotes */}
|
||||||
|
<aside className="hidden lg:block lg:col-span-3 relative">
|
||||||
|
<div className="sticky top-32 space-y-12">
|
||||||
|
<div className="text-xs text-subtle font-serif leading-relaxed border-l-2 border-gray-100 pl-3">
|
||||||
|
<sup className="font-bold mr-1">1</sup>
|
||||||
|
Punica: Multi-Tenant LoRA Serving (Chen, Ye, et al, 2023)
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-subtle font-serif leading-relaxed border-l-2 border-gray-100 pl-3">
|
||||||
|
<sup className="font-bold mr-1">2</sup>
|
||||||
|
LoRA: Low-Rank Adaptation of Large Language Models (Hu et al,
|
||||||
|
2021)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</main>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Mini Player Overlay - Persistent if showMiniPlayer is true */}
|
||||||
|
{showMiniPlayer && activeTab === "read" && (
|
||||||
|
<div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-40 animate-in slide-in-from-bottom-4 fade-in">
|
||||||
|
<div className="bg-ink text-white pl-4 pr-4 py-3 rounded-full shadow-2xl flex items-center gap-4 border border-gray-700">
|
||||||
|
<div className="flex items-center gap-3 border-r border-gray-700 pr-4">
|
||||||
|
<div className="relative flex h-3 w-3">
|
||||||
|
{isPlaying && (
|
||||||
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||||
|
)}
|
||||||
|
<span
|
||||||
|
className={`relative inline-flex rounded-full h-3 w-3 ${isPlaying ? "bg-green-500" : "bg-yellow-500"}`}
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-[10px] font-sans font-bold uppercase tracking-wider text-gray-400">
|
||||||
|
{isPlaying ? t.now_playing : t.paused}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs font-bold font-serif truncate max-w-[150px]">
|
||||||
|
{t.title}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsPlaying(!isPlaying)}
|
||||||
|
className="hover:text-green-400 transition-colors p-1"
|
||||||
|
title={isPlaying ? "Pause" : "Play"}
|
||||||
|
>
|
||||||
|
{isPlaying ? (
|
||||||
|
<Pause size={20} fill="currentColor" />
|
||||||
|
) : (
|
||||||
|
<Play size={20} fill="currentColor" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab("listen")}
|
||||||
|
className="text-xs font-mono underline hover:text-gray-300 px-2"
|
||||||
|
>
|
||||||
|
{language === "en" ? "Transcript" : "คำบรรยาย"}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="w-px h-4 bg-gray-700 mx-1"></div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setIsPlaying(false);
|
||||||
|
setShowMiniPlayer(false);
|
||||||
|
}}
|
||||||
|
className="text-gray-400 hover:text-red-400 transition-colors p-1"
|
||||||
|
title="Close Player"
|
||||||
|
>
|
||||||
|
<X size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
104
pages/HireUs.tsx
Normal file
104
pages/HireUs.tsx
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { TerminalBlock } from '../components/TerminalBlock';
|
||||||
|
import { Mail, MessageSquare, Code } from 'lucide-react';
|
||||||
|
|
||||||
|
export const HireUs: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<div className="bg-paper min-h-screen pt-24 pb-24">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-16">
|
||||||
|
|
||||||
|
{/* Left Column: Context */}
|
||||||
|
<div>
|
||||||
|
<h1 className="font-serif text-4xl md:text-5xl text-ink leading-tight mb-8">
|
||||||
|
Work With Us
|
||||||
|
</h1>
|
||||||
|
<p className="font-serif text-lg text-subtle leading-relaxed mb-12">
|
||||||
|
We are currently accepting new engagements for Q4 2025. We look for partners who have clear technical hurdles in their AI roadmap, rather than open-ended exploration.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="space-y-12">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-sans font-bold text-sm uppercase tracking-widest text-ink mb-4">Engagement Models</h3>
|
||||||
|
<ul className="space-y-6 border-l-2 border-gray-200 pl-6">
|
||||||
|
<li>
|
||||||
|
<h4 className="font-serif font-bold text-lg mb-2">Strategic Sprint (4-6 Weeks)</h4>
|
||||||
|
<p className="text-subtle font-serif text-sm">Best for MVPs, Feasibility Studies, and Architecture Audits. We ship a working artifact and a technical roadmap.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h4 className="font-serif font-bold text-lg mb-2">Quarterly Retainer</h4>
|
||||||
|
<p className="text-subtle font-serif text-sm">For teams needing ongoing specialized ML expertise to augment their core engineering staff. Includes weekly syncs and code review.</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="font-sans font-bold text-sm uppercase tracking-widest text-ink mb-4">What we need from you</h3>
|
||||||
|
<div className="prose prose-sm text-subtle font-serif">
|
||||||
|
<p>
|
||||||
|
To ensure we are a good fit, please provide technical details in your inquiry.
|
||||||
|
Mention your current stack (e.g., AWS, Python, Vercel), specific model constraints, and the primary metric you are trying to improve (latency, accuracy, cost).
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column: Form */}
|
||||||
|
<div className="bg-white p-8 md:p-12 border border-gray-200 shadow-sm">
|
||||||
|
<form className="space-y-6" onSubmit={(e) => e.preventDefault()}>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">Name</label>
|
||||||
|
<input type="text" id="name" className="w-full border-gray-300 border p-3 text-sm focus:ring-ink focus:border-ink outline-none bg-gray-50" placeholder="Jane Doe" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">Work Email</label>
|
||||||
|
<input type="email" id="email" className="w-full border-gray-300 border p-3 text-sm focus:ring-ink focus:border-ink outline-none bg-gray-50" placeholder="jane@company.com" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="company" className="block text-sm font-medium text-gray-700 mb-1">Company / Organization</label>
|
||||||
|
<input type="text" id="company" className="w-full border-gray-300 border p-3 text-sm focus:ring-ink focus:border-ink outline-none bg-gray-50" placeholder="Acme Corp" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="type" className="block text-sm font-medium text-gray-700 mb-1">Project Type</label>
|
||||||
|
<select id="type" className="w-full border-gray-300 border p-3 text-sm focus:ring-ink focus:border-ink outline-none bg-gray-50">
|
||||||
|
<option>MVP Development</option>
|
||||||
|
<option>System Audit</option>
|
||||||
|
<option>Model Fine-Tuning</option>
|
||||||
|
<option>Other / Consulting</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="details" className="block text-sm font-medium text-gray-700 mb-1">Technical Context</label>
|
||||||
|
<textarea
|
||||||
|
id="details"
|
||||||
|
rows={6}
|
||||||
|
className="w-full border-gray-300 border p-3 text-sm focus:ring-ink focus:border-ink outline-none bg-gray-50 font-mono"
|
||||||
|
placeholder="Describe your stack, the models you are experimenting with, and the specific bottlenecks you are facing..."
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" className="w-full bg-ink text-white font-bold py-4 hover:bg-gray-800 transition-colors uppercase tracking-widest text-xs">
|
||||||
|
Request Consultation
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="mt-8 pt-8 border-t border-gray-100 flex items-center justify-center space-x-8 text-subtle">
|
||||||
|
<a href="#" className="flex items-center text-xs uppercase tracking-wider hover:text-ink">
|
||||||
|
<Mail size={16} className="mr-2" /> hello@pradit.app
|
||||||
|
</a>
|
||||||
|
<a href="#" className="flex items-center text-xs uppercase tracking-wider hover:text-ink">
|
||||||
|
<Code size={16} className="mr-2" /> GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
699
pages/Home.tsx
Normal file
699
pages/Home.tsx
Normal file
@ -0,0 +1,699 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { TerminalBlock } from "../components/TerminalBlock";
|
||||||
|
import {
|
||||||
|
ArrowRight,
|
||||||
|
Activity,
|
||||||
|
Search,
|
||||||
|
Database,
|
||||||
|
ChevronRight,
|
||||||
|
GitCommit,
|
||||||
|
BarChart,
|
||||||
|
Server,
|
||||||
|
Shield,
|
||||||
|
Box,
|
||||||
|
Cloud,
|
||||||
|
Layers,
|
||||||
|
Cpu,
|
||||||
|
Lock,
|
||||||
|
X,
|
||||||
|
Zap,
|
||||||
|
Globe,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { useLanguage } from "../App";
|
||||||
|
|
||||||
|
// Type definition for Projects
|
||||||
|
interface ProjectData {
|
||||||
|
id: string;
|
||||||
|
category: string;
|
||||||
|
title: string;
|
||||||
|
shortDesc: string;
|
||||||
|
fullDesc: string;
|
||||||
|
metrics: { label: string; value: string }[];
|
||||||
|
stack: string[];
|
||||||
|
architecture: string;
|
||||||
|
challenge: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Home: React.FC = () => {
|
||||||
|
const { language } = useLanguage();
|
||||||
|
const [selectedProject, setSelectedProject] = useState<ProjectData | null>(
|
||||||
|
null,
|
||||||
|
);
|
||||||
|
|
||||||
|
const content = {
|
||||||
|
en: {
|
||||||
|
new_research: "New Research: LoRA Without Regret",
|
||||||
|
hero_title: "Engineering Intelligence.",
|
||||||
|
hero_subtitle:
|
||||||
|
"We bridge the gap between research papers and production environments. Specialized consulting for LLM infrastructure, evaluation pipelines, and custom model adaptation.",
|
||||||
|
btn_services: "View Services",
|
||||||
|
btn_research: "Read Research",
|
||||||
|
latest_thinking: "Latest Thinking",
|
||||||
|
view_archive: "View Archive",
|
||||||
|
lora_desc:
|
||||||
|
"Fine-tuning large models is expensive. Low-rank adaptation (LoRA) promises efficiency, but does it sacrifice performance? Our deep dive into rank scaling and matrix initialization.",
|
||||||
|
technical_deep_dive: "Technical Deep Dive",
|
||||||
|
expertise_title: "Our Expertise",
|
||||||
|
process_title: "The Pipeline",
|
||||||
|
process_desc:
|
||||||
|
"We don't just write code; we engineer systems. Our engagement process is designed for transparency and velocity.",
|
||||||
|
projects_title: "Selected Deployments",
|
||||||
|
projects_desc:
|
||||||
|
"We don't sell hours. We sell shipped, production-grade systems. Click on a project to view the architecture.",
|
||||||
|
trusted_stack: "Built with Production Standards",
|
||||||
|
modal_stack: "Tech Stack",
|
||||||
|
modal_impact: "Business Impact",
|
||||||
|
modal_arch: "Architecture Highlight",
|
||||||
|
modal_challenge: "The Challenge",
|
||||||
|
close: "Close",
|
||||||
|
services: {
|
||||||
|
mvp: {
|
||||||
|
title: "MVP & Prototyping",
|
||||||
|
desc: "From concept to deployed model in weeks. We build robust POCs using the latest foundation models (Gemini, Claude, OpenAI) to validate business value before heavy investment.",
|
||||||
|
},
|
||||||
|
audit: {
|
||||||
|
title: "System Audit",
|
||||||
|
desc: "Why is your RAG pipeline hallucinating? We perform deep architectural audits, evaluating retrieval quality, prompt efficacy, and security vulnerabilities.",
|
||||||
|
},
|
||||||
|
integration: {
|
||||||
|
title: "Custom Integration",
|
||||||
|
desc: "Fine-tuning and integrating open-weights models into your secure infrastructure. We handle the MLOps so you own your weights and your data.",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
learn_more: "Learn more",
|
||||||
|
process_steps: [
|
||||||
|
{
|
||||||
|
step: "01",
|
||||||
|
title: "Discovery & Audit",
|
||||||
|
desc: "We define the metric that matters. Is it latency? Accuracy? Cost?",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
step: "02",
|
||||||
|
title: "Prototyping",
|
||||||
|
desc: "Rapid iteration using state-of-the-art models to validate feasibility.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
step: "03",
|
||||||
|
title: "Evaluation (Evals)",
|
||||||
|
desc: "We build a custom test suite (Pass@k, RAGAS) before we ship.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
step: "04",
|
||||||
|
title: "Production",
|
||||||
|
desc: "Containerization, CI/CD pipelines, and observability setup.",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
stack: {
|
||||||
|
infra: "Infrastructure",
|
||||||
|
orchestration: "Orchestration",
|
||||||
|
inference: "Inference & Serving",
|
||||||
|
data: "Data & Vector Ops",
|
||||||
|
},
|
||||||
|
projects: [
|
||||||
|
{
|
||||||
|
id: "compliance",
|
||||||
|
category: "FinTech / Legal",
|
||||||
|
title: "ComplianceGuard AI",
|
||||||
|
shortDesc:
|
||||||
|
"Automated regulatory compliance checking for a Tier-1 bank. Reduced manual review time by 85% using a secure RAG pipeline.",
|
||||||
|
fullDesc:
|
||||||
|
"We architected a secure, on-premise Retrieval Augmented Generation (RAG) system that ingests thousands of changing regulatory documents (PDFs) and cross-references them with loan applications in real-time.",
|
||||||
|
challenge:
|
||||||
|
"The client was spending 2000+ man-hours monthly manually checking loan applications against constantly updating Bank of Thailand regulations. Privacy requirements prevented using public APIs.",
|
||||||
|
architecture:
|
||||||
|
'Hybrid-cloud setup. Sensitive data stays on-prem (OpenShift) using a fine-tuned Llama-3-70B for inference. Regulatory documents are indexed in Weaviate. LangChain orchestrates the "Reasoning" step to cite specific regulatory clauses.',
|
||||||
|
metrics: [
|
||||||
|
{ label: "Review Time", value: "-85%" },
|
||||||
|
{ label: "False Positives", value: "< 2%" },
|
||||||
|
{ label: "Cost Saving", value: "$45k/mo" },
|
||||||
|
],
|
||||||
|
stack: [
|
||||||
|
"Llama 3 70B",
|
||||||
|
"Weaviate",
|
||||||
|
"OpenShift",
|
||||||
|
"LangChain",
|
||||||
|
"Python",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "retail",
|
||||||
|
category: "E-Commerce",
|
||||||
|
title: "OmniFlow Agentic Router",
|
||||||
|
shortDesc:
|
||||||
|
"High-throughput customer support agent handling 50k+ daily tickets. Deflects 92% of queries with sub-2s latency.",
|
||||||
|
fullDesc:
|
||||||
|
"A sophisticated multi-agent system that acts as the first line of defense for a major e-commerce platform. It uses tool-calling to actually perform actions (check status, process refund) rather than just chatting.",
|
||||||
|
challenge:
|
||||||
|
'During "11.11" sales events, support volume spikes 10x. Traditional chatbots were too rigid, and human agents were overwhelmed. The system needed to be autonomous but safe.',
|
||||||
|
architecture:
|
||||||
|
'We built a Router Agent using GPT-4o-mini for speed. It classifies intent and routes to specialized Sub-Agents (Refund Agent, Logistics Agent). We implemented a "Human-in-the-loop" handover protocol for low-confidence scores.',
|
||||||
|
metrics: [
|
||||||
|
{ label: "Deflection Rate", value: "92%" },
|
||||||
|
{ label: "Avg Response", value: "1.2s" },
|
||||||
|
{ label: "CSAT Score", value: "4.8/5" },
|
||||||
|
],
|
||||||
|
stack: ["GPT-4o", "Redis", "FastAPI", "Kubernetes", "Postgres"],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
th: {
|
||||||
|
new_research: "งานวิจัยใหม่: LoRA โดยไม่เสียใจ",
|
||||||
|
hero_title: "วิศวกรรมแห่งปัญญาประดิษฐ์",
|
||||||
|
hero_subtitle:
|
||||||
|
"เราเชื่อมช่องว่างระหว่างงานวิจัยทางวิชาการและการใช้งานจริง เชี่ยวชาญด้านโครงสร้างพื้นฐาน LLM, การประเมินผล และการปรับแต่งโมเดลตามความต้องการ",
|
||||||
|
btn_services: "ดูบริการของเรา",
|
||||||
|
btn_research: "อ่านงานวิจัย",
|
||||||
|
latest_thinking: "แนวคิดล่าสุด",
|
||||||
|
view_archive: "ดูบทความทั้งหมด",
|
||||||
|
lora_desc:
|
||||||
|
"การ Fine-tune โมเดลขนาดใหญ่มีค่าใช้จ่ายสูง LoRA สัญญาว่าจะเพิ่มประสิทธิภาพ แต่จะลดคุณภาพหรือไม่? เจาะลึกเรื่อง Rank scaling และการเริ่มต้น Matrix",
|
||||||
|
technical_deep_dive: "เจาะลึกทางเทคนิค",
|
||||||
|
expertise_title: "ความเชี่ยวชาญของเรา",
|
||||||
|
process_title: "กระบวนการทำงาน",
|
||||||
|
process_desc:
|
||||||
|
"เราไม่ได้แค่เขียนโค้ด แต่เราออกแบบระบบ กระบวนการของเราเน้นความโปร่งใสและความรวดเร็ว",
|
||||||
|
projects_title: "ผลงานที่ผ่านมา",
|
||||||
|
projects_desc:
|
||||||
|
"เราไม่ได้ขายชั่วโมงการทำงาน แต่เราส่งมอบระบบที่ใช้งานได้จริง คลิกที่โปรเจกต์เพื่อดูสถาปัตยกรรม",
|
||||||
|
trusted_stack: "สร้างด้วยมาตรฐานระดับ Production",
|
||||||
|
modal_stack: "Tech Stack",
|
||||||
|
modal_impact: "ผลลัพธ์ทางธุรกิจ",
|
||||||
|
modal_arch: "จุดเด่นของสถาปัตยกรรม",
|
||||||
|
modal_challenge: "ความท้าทาย",
|
||||||
|
close: "ปิด",
|
||||||
|
services: {
|
||||||
|
mvp: {
|
||||||
|
title: "MVP และต้นแบบ",
|
||||||
|
desc: "จากแนวคิดสู่โมเดลที่ใช้งานได้จริงในไม่กี่สัปดาห์ เราสร้าง POC ที่แข็งแกร่งด้วยโมเดลล่าสุด (Gemini, Claude, OpenAI) เพื่อตรวจสอบความคุ้มค่าก่อนการลงทุนจริง",
|
||||||
|
},
|
||||||
|
audit: {
|
||||||
|
title: "ตรวจสอบระบบ",
|
||||||
|
desc: "ทำไมระบบ RAG ของคุณถึงให้ข้อมูลผิด? เราตรวจสอบสถาปัตยกรรมอย่างละเอียด ประเมินคุณภาพการสืบค้น และช่องโหว่ด้านความปลอดภัย",
|
||||||
|
},
|
||||||
|
integration: {
|
||||||
|
title: "การรวมระบบตามสั่ง",
|
||||||
|
desc: "ปรับแต่ง (Fine-tune) และรวมโมเดล Open-weights เข้ากับโครงสร้างพื้นฐานที่ปลอดภัยของคุณ เราดูแล MLOps เพื่อให้คุณเป็นเจ้าของข้อมูลและโมเดลอย่างแท้จริง",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
learn_more: "เรียนรู้เพิ่มเติม",
|
||||||
|
process_steps: [
|
||||||
|
{
|
||||||
|
step: "01",
|
||||||
|
title: "ค้นหา & ตรวจสอบ",
|
||||||
|
desc: "เรากำหนดตัวชี้วัดที่สำคัญที่สุด ไม่ว่าจะเป็น ความหน่วง ความแม่นยำ หรือต้นทุน",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
step: "02",
|
||||||
|
title: "สร้างต้นแบบ",
|
||||||
|
desc: "ทำซ้ำอย่างรวดเร็วโดยใช้โมเดลล่าสุดเพื่อตรวจสอบความเป็นไปได้",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
step: "03",
|
||||||
|
title: "การประเมินผล (Evals)",
|
||||||
|
desc: "เราสร้างชุดทดสอบเฉพาะ (Pass@k, RAGAS) ก่อนส่งมอบงาน",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
step: "04",
|
||||||
|
title: "Production",
|
||||||
|
desc: "การทำ Containerization, ระบบ CI/CD และการติดตั้งระบบสังเกตการณ์",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
stack: {
|
||||||
|
infra: "Infrastructure",
|
||||||
|
orchestration: "Orchestration",
|
||||||
|
inference: "Inference & Serving",
|
||||||
|
data: "Data & Vector Ops",
|
||||||
|
},
|
||||||
|
projects: [
|
||||||
|
{
|
||||||
|
id: "compliance",
|
||||||
|
category: "FinTech / Legal",
|
||||||
|
title: "ComplianceGuard AI",
|
||||||
|
shortDesc:
|
||||||
|
"ระบบตรวจสอบการปฏิบัติตามกฎระเบียบอัตโนมัติสำหรับธนาคารชั้นนำ ลดเวลาการตรวจสอบด้วยคนลง 85% โดยใช้ RAG pipeline ที่ปลอดภัย",
|
||||||
|
fullDesc:
|
||||||
|
"เราออกแบบระบบ Retrieval Augmented Generation (RAG) ภายในองค์กรที่ปลอดภัย ซึ่งนำเข้าเอกสารกฎระเบียบหลายพันฉบับที่เปลี่ยนแปลงตลอดเวลา และตรวจสอบเทียบกับคำขอสินเชื่อแบบเรียลไทม์",
|
||||||
|
challenge:
|
||||||
|
"ลูกค้าใช้เวลาคนทำงานกว่า 2,000 ชั่วโมงต่อเดือนในการตรวจสอบคำขอสินเชื่อด้วยตนเองเทียบกับกฎระเบียบธนาคารแห่งประเทศไทย ข้อกำหนดด้านความเป็นส่วนตัวไม่อนุญาตให้ใช้ Public API",
|
||||||
|
architecture:
|
||||||
|
'ระบบ Hybrid-cloud ข้อมูลสำคัญอยู่ภายในองค์กร (OpenShift) โดยใช้ Llama-3-70B ที่ปรับแต่งแล้ว เอกสารกฎระเบียบถูกจัดทำดัชนีใน Weaviate LangChain ควบคุมขั้นตอน "การให้เหตุผล" เพื่ออ้างอิงข้อกฎหมายเฉพาะ',
|
||||||
|
metrics: [
|
||||||
|
{ label: "เวลาตรวจสอบ", value: "-85%" },
|
||||||
|
{ label: "False Positives", value: "< 2%" },
|
||||||
|
{ label: "ประหยัดต้นทุน", value: "$45k/เดือน" },
|
||||||
|
],
|
||||||
|
stack: [
|
||||||
|
"Llama 3 70B",
|
||||||
|
"Weaviate",
|
||||||
|
"OpenShift",
|
||||||
|
"LangChain",
|
||||||
|
"Python",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "retail",
|
||||||
|
category: "E-Commerce",
|
||||||
|
title: "OmniFlow Agentic Router",
|
||||||
|
shortDesc:
|
||||||
|
"ระบบตอบรับลูกค้าความเร็วสูง รองรับ 50,000+ ตั๋วต่อวัน แก้ไขปัญหาอัตโนมัติได้ 92% ด้วยความเร็วต่ำกว่า 2 วินาที",
|
||||||
|
fullDesc:
|
||||||
|
"ระบบ Multi-agent อัจฉริยะที่ทำหน้าที่เป็นด่านหน้าสำหรับแพลตฟอร์มอีคอมเมิร์ซขนาดใหญ่ ใช้การเรียกใช้เครื่องมือ (Tool-calling) เพื่อดำเนินการจริง (ตรวจสอบสถานะ, คืนเงิน) แทนที่จะเป็นแค่การแชท",
|
||||||
|
challenge:
|
||||||
|
'ในช่วงเทศกาล "11.11" ปริมาณการติดต่อเพิ่มขึ้น 10 เท่า Chatbot แบบเดิมแข็งทื่อเกินไป และพนักงานรับมือไม่ไหว ระบบต้องทำงานอัตโนมัติแต่ปลอดภัย',
|
||||||
|
architecture:
|
||||||
|
'เราสร้าง Router Agent โดยใช้ GPT-4o-mini เพื่อความเร็ว โดยจำแนกเจตนาและส่งต่อไปยัง Agent เฉพาะทาง (Refund Agent, Logistics Agent) เราใช้โปรโตคอล "Human-in-the-loop" สำหรับเคสที่มีความมั่นใจต่ำ',
|
||||||
|
metrics: [
|
||||||
|
{ label: "อัตราการตอบกลับ", value: "92%" },
|
||||||
|
{ label: "ความเร็วเฉลี่ย", value: "1.2s" },
|
||||||
|
{ label: "คะแนน CSAT", value: "4.8/5" },
|
||||||
|
],
|
||||||
|
stack: ["GPT-4o", "Redis", "FastAPI", "Kubernetes", "Postgres"],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const t = content[language];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="pt-24 pb-24 bg-paper border-b border-gray-100">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||||
|
<div>
|
||||||
|
<Link
|
||||||
|
to="/research/lora-without-regret"
|
||||||
|
className="inline-flex items-center space-x-2 mb-8 bg-blue-50 border border-blue-100 rounded-full px-4 py-1.5 text-xs font-bold uppercase tracking-widest text-accent hover:bg-blue-100 transition-colors"
|
||||||
|
>
|
||||||
|
<span className="w-2 h-2 rounded-full bg-accent animate-pulse"></span>
|
||||||
|
<span>{t.new_research}</span>
|
||||||
|
</Link>
|
||||||
|
<h1 className="font-serif text-5xl md:text-6xl text-ink leading-tight mb-8">
|
||||||
|
{t.hero_title}
|
||||||
|
</h1>
|
||||||
|
<p className="font-serif text-lg text-subtle mb-10 max-w-lg leading-relaxed">
|
||||||
|
{t.hero_subtitle}
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4">
|
||||||
|
<Link
|
||||||
|
to="/services"
|
||||||
|
className="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium text-white bg-ink hover:bg-gray-800 transition-all shadow-sm rounded-sm"
|
||||||
|
>
|
||||||
|
{t.btn_services}
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/research"
|
||||||
|
className="inline-flex items-center justify-center px-6 py-3 border border-gray-200 text-base font-medium text-ink bg-white hover:bg-gray-50 transition-all rounded-sm"
|
||||||
|
>
|
||||||
|
{t.btn_research}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Technical Trust Signal with Typing Effect */}
|
||||||
|
<div className="lg:pl-12">
|
||||||
|
<TerminalBlock
|
||||||
|
title="audit_pipeline.py"
|
||||||
|
typingEffect={true}
|
||||||
|
lines={[
|
||||||
|
"$ python run_evals.py --model=gemini-2.5-pro",
|
||||||
|
"# Loading dataset: humaneval_v2...",
|
||||||
|
"# Initializing sandbox environment...",
|
||||||
|
"> Running 164 test cases...",
|
||||||
|
"> Pass@1: 92.4% [OK]",
|
||||||
|
"> Latency (p99): 450ms [WARN]",
|
||||||
|
"# Optimization suggestion:",
|
||||||
|
"# Switch to batch inference or semantic caching.",
|
||||||
|
"$ _",
|
||||||
|
]}
|
||||||
|
className="transform lg:rotate-1 hover:rotate-0 transition-transform duration-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Trusted Stack / Logos (Revamped) */}
|
||||||
|
<section className="py-20 bg-gray-50 border-b border-gray-100">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||||
|
{/* Infrastructure */}
|
||||||
|
<div className="flex flex-col items-center text-center">
|
||||||
|
<div className="mb-4 p-3 bg-white rounded-full shadow-sm border border-gray-100">
|
||||||
|
<Cloud className="text-subtle" size={24} />
|
||||||
|
</div>
|
||||||
|
<h4 className="font-sans text-xs font-bold uppercase tracking-widest text-ink mb-2">
|
||||||
|
{t.stack.infra}
|
||||||
|
</h4>
|
||||||
|
<p className="font-mono text-xs text-subtle">
|
||||||
|
AWS, GCP, Azure, Terraform
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Orchestration */}
|
||||||
|
<div className="flex flex-col items-center text-center">
|
||||||
|
<div className="mb-4 p-3 bg-white rounded-full shadow-sm border border-gray-100">
|
||||||
|
<Box className="text-subtle" size={24} />
|
||||||
|
</div>
|
||||||
|
<h4 className="font-sans text-xs font-bold uppercase tracking-widest text-ink mb-2">
|
||||||
|
{t.stack.orchestration}
|
||||||
|
</h4>
|
||||||
|
<p className="font-mono text-xs text-subtle">
|
||||||
|
Kubernetes, Docker, Ray, Airflow
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Inference */}
|
||||||
|
<div className="flex flex-col items-center text-center">
|
||||||
|
<div className="mb-4 p-3 bg-white rounded-full shadow-sm border border-gray-100">
|
||||||
|
<Cpu className="text-subtle" size={24} />
|
||||||
|
</div>
|
||||||
|
<h4 className="font-sans text-xs font-bold uppercase tracking-widest text-ink mb-2">
|
||||||
|
{t.stack.inference}
|
||||||
|
</h4>
|
||||||
|
<p className="font-mono text-xs text-subtle">
|
||||||
|
vLLM, TorchServe, ONNX Runtime
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Data */}
|
||||||
|
<div className="flex flex-col items-center text-center">
|
||||||
|
<div className="mb-4 p-3 bg-white rounded-full shadow-sm border border-gray-100">
|
||||||
|
<Layers className="text-subtle" size={24} />
|
||||||
|
</div>
|
||||||
|
<h4 className="font-sans text-xs font-bold uppercase tracking-widest text-ink mb-2">
|
||||||
|
{t.stack.data}
|
||||||
|
</h4>
|
||||||
|
<p className="font-mono text-xs text-subtle">
|
||||||
|
Pinecone, Weaviate, Postgres, Redis
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Featured Research Snippet */}
|
||||||
|
<section className="py-24 bg-white">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="flex items-baseline justify-between mb-12">
|
||||||
|
<h2 className="font-sans font-bold text-xs uppercase tracking-widest text-subtle">
|
||||||
|
{t.latest_thinking}
|
||||||
|
</h2>
|
||||||
|
<Link
|
||||||
|
to="/research"
|
||||||
|
className="group flex items-center text-sm font-serif text-ink hover:text-accent"
|
||||||
|
>
|
||||||
|
{t.view_archive}{" "}
|
||||||
|
<ArrowRight className="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Link to="/research/lora-without-regret" className="block group">
|
||||||
|
<article className="grid grid-cols-1 md:grid-cols-2 gap-12 border-t border-gray-100 pt-12">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-serif text-3xl text-ink mb-4 group-hover:text-gray-600 transition-colors">
|
||||||
|
LoRA Without Regret
|
||||||
|
</h3>
|
||||||
|
<p className="font-serif text-subtle text-lg leading-relaxed mb-6">
|
||||||
|
{t.lora_desc}
|
||||||
|
</p>
|
||||||
|
<span className="text-xs font-sans font-bold uppercase text-accent">
|
||||||
|
{t.technical_deep_dive}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gray-50 p-8 flex items-center justify-center border border-gray-100">
|
||||||
|
{/* Mini visualization for the teaser */}
|
||||||
|
<div className="grid grid-cols-12 gap-1 w-full max-w-xs opacity-50 group-hover:opacity-80 transition-opacity">
|
||||||
|
{[...Array(48)].map((_, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="aspect-square bg-blue-500"
|
||||||
|
style={{ opacity: Math.random() }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Services Preview */}
|
||||||
|
<section className="py-24 bg-paper border-t border-gray-100">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 className="font-sans font-bold text-xs uppercase tracking-widest text-subtle mb-16">
|
||||||
|
{t.expertise_title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{/* Service 1 */}
|
||||||
|
<div className="group p-8 border border-gray-200 bg-white hover:border-gray-400 transition-colors cursor-pointer relative overflow-hidden">
|
||||||
|
<div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||||
|
<Activity size={64} />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-serif text-xl text-ink mb-4 font-bold">
|
||||||
|
{t.services.mvp.title}
|
||||||
|
</h3>
|
||||||
|
<p className="font-serif text-sm text-subtle leading-relaxed mb-8">
|
||||||
|
{t.services.mvp.desc}
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
to="/services"
|
||||||
|
className="inline-flex items-center text-xs font-bold uppercase tracking-wider text-ink group-hover:text-accent"
|
||||||
|
>
|
||||||
|
{t.learn_more} <ChevronRight size={16} className="ml-1" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Service 2 */}
|
||||||
|
<div className="group p-8 border border-gray-200 bg-white hover:border-gray-400 transition-colors cursor-pointer relative overflow-hidden">
|
||||||
|
<div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||||
|
<Search size={64} />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-serif text-xl text-ink mb-4 font-bold">
|
||||||
|
{t.services.audit.title}
|
||||||
|
</h3>
|
||||||
|
<p className="font-serif text-sm text-subtle leading-relaxed mb-8">
|
||||||
|
{t.services.audit.desc}
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
to="/services"
|
||||||
|
className="inline-flex items-center text-xs font-bold uppercase tracking-wider text-ink group-hover:text-accent"
|
||||||
|
>
|
||||||
|
{t.learn_more} <ChevronRight size={16} className="ml-1" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Service 3 */}
|
||||||
|
<div className="group p-8 border border-gray-200 bg-white hover:border-gray-400 transition-colors cursor-pointer relative overflow-hidden">
|
||||||
|
<div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||||
|
<Database size={64} />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-serif text-xl text-ink mb-4 font-bold">
|
||||||
|
{t.services.integration.title}
|
||||||
|
</h3>
|
||||||
|
<p className="font-serif text-sm text-subtle leading-relaxed mb-8">
|
||||||
|
{t.services.integration.desc}
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
to="/services"
|
||||||
|
className="inline-flex items-center text-xs font-bold uppercase tracking-wider text-ink group-hover:text-accent"
|
||||||
|
>
|
||||||
|
{t.learn_more} <ChevronRight size={16} className="ml-1" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Process Pipeline Section */}
|
||||||
|
<section className="py-24 bg-[#1e1e1e] text-white overflow-hidden relative">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||||
|
<div className="mb-16 max-w-2xl">
|
||||||
|
<h2 className="font-sans font-bold text-xs uppercase tracking-widest text-green-400 mb-4">
|
||||||
|
{t.process_title}
|
||||||
|
</h2>
|
||||||
|
<p className="font-serif text-2xl text-gray-300">
|
||||||
|
{t.process_desc}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||||
|
{t.process_steps.map((step, idx) => (
|
||||||
|
<div key={idx} className="relative group">
|
||||||
|
<div className="w-12 h-12 rounded-full border border-gray-600 bg-gray-800 flex items-center justify-center font-mono text-sm font-bold mb-6 group-hover:border-green-400 group-hover:text-green-400 transition-colors">
|
||||||
|
{step.step}
|
||||||
|
</div>
|
||||||
|
<h3 className="font-bold text-lg mb-2">{step.title}</h3>
|
||||||
|
<p className="text-gray-400 font-serif text-sm leading-relaxed">
|
||||||
|
{step.desc}
|
||||||
|
</p>
|
||||||
|
{/* Connecting Line */}
|
||||||
|
{idx < 3 && (
|
||||||
|
<div className="hidden md:block absolute top-6 left-14 w-[calc(100%-3rem)] h-px bg-gray-800"></div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Featured Projects (Improved Enterprise) */}
|
||||||
|
<section className="py-24 bg-white">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="mb-16 text-center max-w-3xl mx-auto">
|
||||||
|
<h2 className="font-sans font-bold text-xs uppercase tracking-widest text-subtle mb-4">
|
||||||
|
{t.projects_title}
|
||||||
|
</h2>
|
||||||
|
<p className="font-serif text-lg text-subtle">{t.projects_desc}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||||
|
{t.projects.map((project) => (
|
||||||
|
<div
|
||||||
|
key={project.id}
|
||||||
|
onClick={() => setSelectedProject(project)}
|
||||||
|
className="border border-gray-200 rounded-sm hover:shadow-xl transition-all duration-300 p-8 bg-white flex flex-col cursor-pointer group hover:-translate-y-1"
|
||||||
|
>
|
||||||
|
<div className="mb-6 flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div
|
||||||
|
className={`p-2 rounded-md ${project.id === "compliance" ? "bg-blue-50 text-accent" : "bg-purple-50 text-purple-600"}`}
|
||||||
|
>
|
||||||
|
{project.id === "compliance" ? (
|
||||||
|
<Lock size={24} />
|
||||||
|
) : (
|
||||||
|
<Zap size={24} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<span className="font-mono text-xs text-subtle uppercase tracking-widest">
|
||||||
|
{project.category}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="opacity-0 group-hover:opacity-100 transition-opacity text-subtle">
|
||||||
|
<ArrowRight size={20} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="font-serif font-bold text-2xl text-ink mb-4">
|
||||||
|
{project.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-subtle font-serif text-base leading-relaxed mb-8 flex-grow">
|
||||||
|
{project.shortDesc}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-3 gap-4 border-t border-gray-100 pt-6">
|
||||||
|
{project.metrics.map((metric, idx) => (
|
||||||
|
<div key={idx}>
|
||||||
|
<div className="font-mono text-lg font-bold text-ink">
|
||||||
|
{metric.value}
|
||||||
|
</div>
|
||||||
|
<div className="text-[10px] uppercase text-gray-400 font-sans font-bold">
|
||||||
|
{metric.label}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Project Modal */}
|
||||||
|
{selectedProject && (
|
||||||
|
<div className="fixed inset-0 z-[60] flex items-center justify-center p-4 md:p-8">
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
||||||
|
onClick={() => setSelectedProject(null)}
|
||||||
|
></div>
|
||||||
|
<div className="bg-white w-full max-w-4xl max-h-[90vh] overflow-y-auto rounded-lg shadow-2xl relative z-10 flex flex-col md:flex-row animate-in fade-in zoom-in duration-200">
|
||||||
|
{/* Modal Left: Overview */}
|
||||||
|
<div className="p-8 md:p-10 md:w-2/3">
|
||||||
|
<h2 className="font-serif text-3xl font-bold text-ink mb-2">
|
||||||
|
{selectedProject.title}
|
||||||
|
</h2>
|
||||||
|
<span className="font-mono text-xs uppercase tracking-widest text-accent mb-6 block">
|
||||||
|
{selectedProject.category}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div>
|
||||||
|
<h4 className="font-sans font-bold text-xs uppercase tracking-widest text-subtle mb-2">
|
||||||
|
{t.modal_challenge}
|
||||||
|
</h4>
|
||||||
|
<p className="font-serif text-subtle leading-relaxed">
|
||||||
|
{selectedProject.challenge}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="font-sans font-bold text-xs uppercase tracking-widest text-subtle mb-2">
|
||||||
|
{t.modal_arch}
|
||||||
|
</h4>
|
||||||
|
<p className="font-serif text-ink leading-relaxed">
|
||||||
|
{selectedProject.architecture}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="font-sans font-bold text-xs uppercase tracking-widest text-subtle mb-2">
|
||||||
|
{t.modal_impact}
|
||||||
|
</h4>
|
||||||
|
<div className="grid grid-cols-3 gap-4 bg-gray-50 p-4 rounded border border-gray-100">
|
||||||
|
{selectedProject.metrics.map((metric, idx) => (
|
||||||
|
<div key={idx}>
|
||||||
|
<div className="font-mono text-xl font-bold text-green-600">
|
||||||
|
{metric.value}
|
||||||
|
</div>
|
||||||
|
<div className="text-[10px] uppercase text-gray-400 font-sans font-bold">
|
||||||
|
{metric.label}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Modal Right: Stack */}
|
||||||
|
<div className="bg-[#1e1e1e] p-8 md:p-10 md:w-1/3 text-gray-300 border-l border-gray-800">
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedProject(null)}
|
||||||
|
className="absolute top-4 right-4 text-gray-400 hover:text-white"
|
||||||
|
>
|
||||||
|
<X size={24} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<h3 className="font-sans font-bold text-xs uppercase tracking-widest text-gray-500 mb-6">
|
||||||
|
{t.modal_stack}
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-3 font-mono text-sm">
|
||||||
|
{selectedProject.stack.map((tech, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="flex items-center gap-3 pb-3 border-b border-gray-800 last:border-0"
|
||||||
|
>
|
||||||
|
<div className="w-1.5 h-1.5 rounded-full bg-green-500"></div>
|
||||||
|
{tech}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-12 p-6 bg-gray-800/50 rounded border border-gray-700">
|
||||||
|
<Globe className="text-gray-500 mb-4" size={24} />
|
||||||
|
<p className="font-serif text-xs italic text-gray-400 leading-relaxed">
|
||||||
|
"Pradit delivered this system 2 weeks ahead of schedule. The
|
||||||
|
documentation was better than our internal standard."
|
||||||
|
</p>
|
||||||
|
<div className="mt-2 font-sans text-[10px] font-bold uppercase text-gray-500">
|
||||||
|
- CTO, Client Partner
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
329
pages/Playground.tsx
Normal file
329
pages/Playground.tsx
Normal file
@ -0,0 +1,329 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import {
|
||||||
|
UploadCloud,
|
||||||
|
FileText,
|
||||||
|
Database,
|
||||||
|
Search,
|
||||||
|
CheckCircle2,
|
||||||
|
ArrowRight,
|
||||||
|
Loader2,
|
||||||
|
Lock,
|
||||||
|
Cpu,
|
||||||
|
File,
|
||||||
|
Terminal,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { useLanguage } from "../App";
|
||||||
|
import { TerminalBlock } from "../components/TerminalBlock";
|
||||||
|
|
||||||
|
export const Playground: React.FC = () => {
|
||||||
|
const { language } = useLanguage();
|
||||||
|
const [step, setStep] = useState<"upload" | "processing" | "ready">("upload");
|
||||||
|
const [processingStage, setProcessingStage] = useState(0); // 0: Parsing, 1: Chunking, 2: Embedding, 3: Indexing
|
||||||
|
const [query, setQuery] = useState("");
|
||||||
|
const [showResult, setShowResult] = useState(false);
|
||||||
|
|
||||||
|
const content = {
|
||||||
|
en: {
|
||||||
|
title: "Enterprise Knowledge Engine",
|
||||||
|
subtitle:
|
||||||
|
"Experience our secure RAG pipeline architecture. Turn unstructured documents into queryable intelligence.",
|
||||||
|
upload_title: "Data Ingestion",
|
||||||
|
upload_desc:
|
||||||
|
"Drag and drop your internal PDFs, DOCX, or Wiki dumps here. We simulate the ingestion process secure enterprises use.",
|
||||||
|
drop_label: "Drop corporate assets here",
|
||||||
|
processing_title: "Processing Pipeline",
|
||||||
|
stages: [
|
||||||
|
"Optical Character Recognition (OCR)",
|
||||||
|
"Semantic Chunking",
|
||||||
|
"Vector Embedding (text-embedding-3-large)",
|
||||||
|
"Pinecone Indexing",
|
||||||
|
],
|
||||||
|
query_placeholder: "Ask a question about the uploaded documents...",
|
||||||
|
query_btn: "Retrieve Insight",
|
||||||
|
result_title: "Synthesized Answer",
|
||||||
|
source_title: "Source Attribution",
|
||||||
|
value_prop:
|
||||||
|
"Why this matters: Most enterprise knowledge is trapped in PDFs. We build pipelines that unlock this data while respecting RBAC (Role-Based Access Control).",
|
||||||
|
},
|
||||||
|
th: {
|
||||||
|
title: "เครื่องยนต์ความรู้องค์กร",
|
||||||
|
subtitle:
|
||||||
|
"สัมผัสสถาปัตยกรรม RAG ที่ปลอดภัยของเรา เปลี่ยนเอกสารที่ไม่มีโครงสร้างให้เป็นข้อมูลอัจฉริยะที่ค้นหาได้",
|
||||||
|
upload_title: "การนำเข้าข้อมูล",
|
||||||
|
upload_desc:
|
||||||
|
"ลากและวาง PDF, DOCX หรือ Wiki ภายในองค์กรที่นี่ เราจำลองกระบวนการนำเข้าข้อมูลที่องค์กรระดับสูงใช้",
|
||||||
|
drop_label: "วางไฟล์ข้อมูลองค์กรที่นี่",
|
||||||
|
processing_title: "ท่อประมวลผลข้อมูล",
|
||||||
|
stages: [
|
||||||
|
"การแปลงภาพเป็นข้อความ (OCR)",
|
||||||
|
"การแบ่งส่วนความหมาย (Semantic Chunking)",
|
||||||
|
"การสร้าง Vector (text-embedding-3-large)",
|
||||||
|
"การจัดทำดัชนี Pinecone",
|
||||||
|
],
|
||||||
|
query_placeholder: "ถามคำถามเกี่ยวกับเอกสารที่อัปโหลด...",
|
||||||
|
query_btn: "ค้นหาข้อมูลเชิงลึก",
|
||||||
|
result_title: "คำตอบที่สังเคราะห์แล้ว",
|
||||||
|
source_title: "การอ้างอิงแหล่งที่มา",
|
||||||
|
value_prop:
|
||||||
|
"ทำไมสิ่งนี้ถึงสำคัญ: ความรู้องค์กรส่วนใหญ่ติดอยู่ใน PDF เราสร้างระบบที่ปลดล็อกข้อมูลนี้โดยยังคงรักษาความปลอดภัยตามสิทธิ์การเข้าถึง (RBAC)",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const t = content[language];
|
||||||
|
|
||||||
|
const handleSimulateUpload = () => {
|
||||||
|
setStep("processing");
|
||||||
|
setProcessingStage(0);
|
||||||
|
|
||||||
|
// Simulate pipeline stages
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
setProcessingStage((prev) => {
|
||||||
|
if (prev >= 3) {
|
||||||
|
clearInterval(interval);
|
||||||
|
setTimeout(() => setStep("ready"), 800);
|
||||||
|
return 3;
|
||||||
|
}
|
||||||
|
return prev + 1;
|
||||||
|
});
|
||||||
|
}, 1500);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSearch = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!query) return;
|
||||||
|
setShowResult(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-paper min-h-screen pt-24 pb-24">
|
||||||
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<header className="mb-16 text-center max-w-3xl mx-auto">
|
||||||
|
<h1 className="font-serif text-4xl md:text-5xl text-ink leading-tight mb-6">
|
||||||
|
{t.title}
|
||||||
|
</h1>
|
||||||
|
<p className="font-serif text-xl text-subtle leading-relaxed">
|
||||||
|
{t.subtitle}
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
|
||||||
|
{/* Left: Demo Interface */}
|
||||||
|
<div className="lg:col-span-7 space-y-8">
|
||||||
|
{/* Step 1: Upload */}
|
||||||
|
<div
|
||||||
|
className={`border-2 border-dashed rounded-lg transition-all duration-500 ${step === "upload" ? "border-ink bg-gray-50 p-12" : "border-gray-200 bg-white p-6 opacity-50"}`}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col items-center text-center">
|
||||||
|
<div
|
||||||
|
className={`p-4 rounded-full mb-4 ${step === "upload" ? "bg-white shadow-md text-ink" : "bg-gray-100 text-gray-400"}`}
|
||||||
|
>
|
||||||
|
<UploadCloud size={step === "upload" ? 32 : 24} />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-sans font-bold uppercase tracking-widest text-sm mb-2">
|
||||||
|
{t.upload_title}
|
||||||
|
</h3>
|
||||||
|
{step === "upload" && (
|
||||||
|
<>
|
||||||
|
<p className="font-serif text-subtle text-sm mb-8 max-w-md">
|
||||||
|
{t.upload_desc}
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={handleSimulateUpload}
|
||||||
|
className="bg-ink text-white px-8 py-3 rounded-sm font-bold text-xs uppercase tracking-widest hover:bg-gray-800 transition-colors shadow-lg"
|
||||||
|
>
|
||||||
|
{t.drop_label}
|
||||||
|
</button>
|
||||||
|
<div className="mt-6 flex gap-4 text-xs text-gray-400 font-mono">
|
||||||
|
<span className="flex items-center">
|
||||||
|
<File size={12} className="mr-1" /> policy_v2.pdf
|
||||||
|
</span>
|
||||||
|
<span className="flex items-center">
|
||||||
|
<File size={12} className="mr-1" /> technical_specs.docx
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 2: Processing Pipeline */}
|
||||||
|
{(step === "processing" || step === "ready") && (
|
||||||
|
<div className="bg-white border border-gray-200 rounded-lg p-8 shadow-sm animate-in fade-in slide-in-from-bottom-4">
|
||||||
|
<h3 className="font-sans font-bold uppercase tracking-widest text-sm mb-6 flex items-center gap-2">
|
||||||
|
<Cpu size={16} className="text-accent" /> {t.processing_title}
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-6">
|
||||||
|
{t.stages.map((stage, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="relative pl-8 border-l-2 border-gray-100"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`absolute -left-[9px] top-0 w-4 h-4 rounded-full border-2 transition-colors duration-500 ${
|
||||||
|
processingStage > index
|
||||||
|
? "bg-green-500 border-green-500"
|
||||||
|
: processingStage === index
|
||||||
|
? "bg-white border-accent animate-pulse"
|
||||||
|
: "bg-white border-gray-200"
|
||||||
|
}`}
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`transition-opacity duration-500 ${processingStage >= index ? "opacity-100" : "opacity-30"}`}
|
||||||
|
>
|
||||||
|
<p className="font-mono text-sm font-bold text-ink">
|
||||||
|
{stage}
|
||||||
|
</p>
|
||||||
|
{processingStage === index && (
|
||||||
|
<p className="text-xs text-accent mt-1 font-mono animate-pulse">
|
||||||
|
Processing...
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Step 3: Query Interface */}
|
||||||
|
{step === "ready" && (
|
||||||
|
<div className="bg-white border border-gray-200 rounded-lg p-8 shadow-lg animate-in fade-in slide-in-from-bottom-4 relative overflow-hidden">
|
||||||
|
<div className="absolute top-0 right-0 p-4">
|
||||||
|
<div className="flex items-center gap-1 px-2 py-1 bg-green-50 text-green-700 rounded text-[10px] font-bold uppercase tracking-wide">
|
||||||
|
<Lock size={10} /> Secure Context
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSearch} className="relative mb-8">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={query}
|
||||||
|
onChange={(e) => setQuery(e.target.value)}
|
||||||
|
className="w-full bg-gray-50 border border-gray-200 p-4 pr-12 rounded-sm text-ink focus:outline-none focus:border-ink focus:ring-1 focus:ring-ink font-serif placeholder:text-gray-400"
|
||||||
|
placeholder={t.query_placeholder}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="absolute right-2 top-2 bottom-2 bg-white text-ink p-2 rounded-sm hover:bg-gray-100 border border-gray-200 transition-colors"
|
||||||
|
>
|
||||||
|
<Search size={20} />
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{showResult && (
|
||||||
|
<div className="animate-in fade-in">
|
||||||
|
<div className="mb-6">
|
||||||
|
<h4 className="font-sans font-bold text-xs uppercase tracking-widest text-subtle mb-2">
|
||||||
|
{t.result_title}
|
||||||
|
</h4>
|
||||||
|
<p className="font-serif text-lg leading-relaxed text-ink">
|
||||||
|
Based on the{" "}
|
||||||
|
<span className="bg-blue-100 px-1 font-mono text-sm">
|
||||||
|
technical_specs.docx
|
||||||
|
</span>
|
||||||
|
, the maximum concurrent connection limit for the
|
||||||
|
websocket gateway is{" "}
|
||||||
|
<strong className="text-ink">10,000 users</strong> per
|
||||||
|
shard. To increase this, you must scale the Redis
|
||||||
|
cluster horizontally.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gray-50 p-4 rounded border border-gray-200">
|
||||||
|
<h4 className="font-sans font-bold text-[10px] uppercase tracking-widest text-gray-400 mb-2 flex items-center gap-2">
|
||||||
|
<Database size={10} /> {t.source_title}
|
||||||
|
</h4>
|
||||||
|
<div className="font-mono text-xs text-gray-500 p-2 bg-white border border-gray-100 border-l-4 border-l-accent">
|
||||||
|
"...gateway.max_connections = 10000 # Hard limit per
|
||||||
|
shard. See Redis scaling section..."
|
||||||
|
<div className="mt-1 text-[10px] text-gray-300 text-right">
|
||||||
|
Score: 0.89
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right: Architecture Context */}
|
||||||
|
<div className="lg:col-span-5">
|
||||||
|
<div className="sticky top-32">
|
||||||
|
<div className="bg-[#1e1e1e] text-gray-300 rounded-lg overflow-hidden shadow-2xl border border-gray-800 mb-8">
|
||||||
|
<div className="bg-[#252526] px-4 py-2 border-b border-gray-700 flex items-center gap-2">
|
||||||
|
<Terminal size={12} />
|
||||||
|
<span className="text-xs font-mono">pipeline_logs.txt</span>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 font-mono text-xs space-y-2 h-[300px] overflow-y-auto">
|
||||||
|
<div className="text-green-400">
|
||||||
|
$ init_ingestion_job --secure
|
||||||
|
</div>
|
||||||
|
{step === "processing" && (
|
||||||
|
<>
|
||||||
|
<div className="text-gray-400">
|
||||||
|
[INFO] File uploaded: technical_specs.docx (2.4MB)
|
||||||
|
</div>
|
||||||
|
<div className="text-gray-400">
|
||||||
|
[INFO] Parsing PDF structure...
|
||||||
|
</div>
|
||||||
|
{processingStage >= 1 && (
|
||||||
|
<div className="text-blue-400">
|
||||||
|
[PROC] Chunking strategy: RecursiveCharacter (512tk)
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{processingStage >= 2 && (
|
||||||
|
<div className="text-purple-400">
|
||||||
|
[EMBD] Batch embedding 142 chunks...
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{processingStage >= 3 && (
|
||||||
|
<div className="text-yellow-400">
|
||||||
|
[INDX] Upserting to namespace 'corp-knowledge'...
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{step === "ready" && (
|
||||||
|
<>
|
||||||
|
<div className="text-green-400">
|
||||||
|
[DONE] Indexing complete. Latency: 4.2s
|
||||||
|
</div>
|
||||||
|
<div className="text-gray-400">
|
||||||
|
----------------------------------------
|
||||||
|
</div>
|
||||||
|
<div className="text-white animate-pulse">
|
||||||
|
$ waiting_for_query...
|
||||||
|
</div>
|
||||||
|
{showResult && (
|
||||||
|
<>
|
||||||
|
<div className="text-green-400">$ query_received</div>
|
||||||
|
<div className="text-gray-400">
|
||||||
|
[RETR] Semantic search k=3
|
||||||
|
</div>
|
||||||
|
<div className="text-gray-400">
|
||||||
|
[GEN] LLM Context window filled (1200 tokens)
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-6 bg-blue-50 border border-blue-100 rounded-lg">
|
||||||
|
<h4 className="font-serif font-bold text-accent text-lg mb-2">
|
||||||
|
Business Value
|
||||||
|
</h4>
|
||||||
|
<p className="font-serif text-sm text-ink leading-relaxed">
|
||||||
|
{t.value_prop}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
269
pages/Research.tsx
Normal file
269
pages/Research.tsx
Normal file
@ -0,0 +1,269 @@
|
|||||||
|
import React, { useState, useMemo } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { ArrowRight, Search as SearchIcon, Filter, X } from "lucide-react";
|
||||||
|
import { useLanguage } from "../App";
|
||||||
|
|
||||||
|
export const Research: React.FC = () => {
|
||||||
|
const { language } = useLanguage();
|
||||||
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
const [selectedCategory, setSelectedCategory] = useState("All");
|
||||||
|
|
||||||
|
const content = {
|
||||||
|
en: {
|
||||||
|
title: "Research Archive",
|
||||||
|
subtitle:
|
||||||
|
"Our collection of white papers, technical deep dives, and engineering retrospectives. We believe in open-sourcing our learnings from the frontier of applied AI.",
|
||||||
|
read_paper: "Read Paper",
|
||||||
|
search_placeholder: "grep search-query...",
|
||||||
|
no_results: "No research found matching criteria.",
|
||||||
|
categories: [
|
||||||
|
"All",
|
||||||
|
"Fine-tuning",
|
||||||
|
"Systems",
|
||||||
|
"Architecture",
|
||||||
|
"Small Models",
|
||||||
|
],
|
||||||
|
articles: [
|
||||||
|
{
|
||||||
|
id: "lora-without-regret",
|
||||||
|
title: "LoRA Without Regret",
|
||||||
|
date: "Sep 29, 2025",
|
||||||
|
authors: "John Schulman, Pradit",
|
||||||
|
abstract:
|
||||||
|
"Fine-tuning large models is expensive. We investigate whether Low-Rank Adaptation (LoRA) can truly match full fine-tuning performance across various downstream tasks, analyzing rank scaling and matrix initialization.",
|
||||||
|
tags: ["Fine-tuning", "Optimization", "Deep Learning"],
|
||||||
|
category: "Fine-tuning",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "rag-latency-optimization",
|
||||||
|
title: "Optimizing RAG Latency: A Systems Approach",
|
||||||
|
date: "Aug 14, 2025",
|
||||||
|
authors: "Pradit Engineering",
|
||||||
|
abstract:
|
||||||
|
"Retrieval-Augmented Generation often suffers from p99 latency spikes. We break down the contribution of embedding generation, vector search, and reranking, proposing a caching layer that reduces latency by 40%.",
|
||||||
|
tags: ["RAG", "Systems", "Latency"],
|
||||||
|
category: "Architecture",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "small-models-reasoning",
|
||||||
|
title: "The Unreasonable Effectiveness of Small Models",
|
||||||
|
date: "July 02, 2025",
|
||||||
|
authors: "Pradit Research",
|
||||||
|
abstract:
|
||||||
|
"Can a 7B parameter model reason as well as a 70B model? With specific chain-of-thought fine-tuning on high-quality synthetic data, we demonstrate parity on GSM8K benchmarks.",
|
||||||
|
tags: ["Small Models", "Reasoning", "Data Efficiency"],
|
||||||
|
category: "Small Models",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
th: {
|
||||||
|
title: "คลังงานวิจัย",
|
||||||
|
subtitle:
|
||||||
|
"คลังเอกสารทางเทคนิคและการถอดบทเรียนทางวิศวกรรม เราเชื่อในการเปิดเผยสิ่งที่เราเรียนรู้จากพรมแดนแห่ง AI ประยุกต์สู่สาธารณะ",
|
||||||
|
read_paper: "อ่านบทความ",
|
||||||
|
search_placeholder: "ค้นหาบทความ...",
|
||||||
|
no_results: "ไม่พบงานวิจัยที่ตรงกับเงื่อนไข",
|
||||||
|
categories: [
|
||||||
|
"ทั้งหมด",
|
||||||
|
"Fine-tuning",
|
||||||
|
"Systems",
|
||||||
|
"Architecture",
|
||||||
|
"Small Models",
|
||||||
|
],
|
||||||
|
articles: [
|
||||||
|
{
|
||||||
|
id: "lora-without-regret",
|
||||||
|
title: "LoRA โดยไม่เสียใจ",
|
||||||
|
date: "29 ก.ย. 2025",
|
||||||
|
authors: "John Schulman, Pradit (ประดิษฐ์)",
|
||||||
|
abstract:
|
||||||
|
"การ Fine-tune โมเดลขนาดใหญ่มีค่าใช้จ่ายสูง เราตรวจสอบว่า Low-Rank Adaptation (LoRA) สามารถให้ประสิทธิภาพเทียบเท่าการ Fine-tune เต็มรูปแบบได้หรือไม่ โดยวิเคราะห์การปรับขนาด Rank และการเริ่มต้น Matrix",
|
||||||
|
tags: ["Fine-tuning", "Optimization", "Deep Learning"],
|
||||||
|
category: "Fine-tuning",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "rag-latency-optimization",
|
||||||
|
title: "การปรับปรุงความหน่วง RAG: แนวทางเชิงระบบ",
|
||||||
|
date: "14 ส.ค. 2025",
|
||||||
|
authors: "Pradit Engineering",
|
||||||
|
abstract:
|
||||||
|
"ระบบ RAG มักประสบปัญหาค่าความหน่วง p99 สูง เราจำแนกส่วนประกอบของการสร้าง Embedding, Vector Search และ Reranking พร้อมเสนอชั้น Caching ที่ลดความหน่วงได้ถึง 40%",
|
||||||
|
tags: ["RAG", "Systems", "Latency"],
|
||||||
|
category: "Architecture",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "small-models-reasoning",
|
||||||
|
title: "ประสิทธิภาพที่น่าทึ่งของโมเดลขนาดเล็ก",
|
||||||
|
date: "02 ก.ค. 2025",
|
||||||
|
authors: "Pradit Research",
|
||||||
|
abstract:
|
||||||
|
"โมเดล 7B สามารถให้เหตุผลได้ดีเท่ากับ 70B หรือไม่? ด้วยการ Fine-tune แบบ Chain-of-thought บนข้อมูลสังเคราะห์คุณภาพสูง เราแสดงให้เห็นถึงความสามารถที่เทียบเท่ากันบน GSM8K",
|
||||||
|
tags: ["Small Models", "Reasoning", "Data Efficiency"],
|
||||||
|
category: "Small Models",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const t = content[language];
|
||||||
|
|
||||||
|
// Filtering Logic
|
||||||
|
const filteredArticles = useMemo(() => {
|
||||||
|
return t.articles.filter((article) => {
|
||||||
|
const matchesSearch =
|
||||||
|
article.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
article.abstract.toLowerCase().includes(searchQuery.toLowerCase());
|
||||||
|
|
||||||
|
// Map 'All' or 'ทั้งหมด' to show everything
|
||||||
|
const isAll =
|
||||||
|
selectedCategory === "All" || selectedCategory === "ทั้งหมด";
|
||||||
|
const matchesCategory =
|
||||||
|
isAll ||
|
||||||
|
article.category === selectedCategory ||
|
||||||
|
article.tags.includes(selectedCategory);
|
||||||
|
|
||||||
|
return matchesSearch && matchesCategory;
|
||||||
|
});
|
||||||
|
}, [searchQuery, selectedCategory, t.articles]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-paper min-h-screen pt-24 pb-24">
|
||||||
|
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="mb-12 pb-8 border-b border-gray-100">
|
||||||
|
<h1 className="font-serif text-4xl md:text-5xl text-ink leading-tight mb-6">
|
||||||
|
{t.title}
|
||||||
|
</h1>
|
||||||
|
<p className="font-serif text-xl text-subtle leading-relaxed max-w-3xl">
|
||||||
|
{t.subtitle}
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Controls: Search & Filter */}
|
||||||
|
<div className="flex flex-col md:flex-row gap-6 mb-16 items-start md:items-center justify-between">
|
||||||
|
{/* Categories */}
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{t.categories.map((cat) => (
|
||||||
|
<button
|
||||||
|
key={cat}
|
||||||
|
onClick={() => setSelectedCategory(cat)}
|
||||||
|
className={`px-4 py-1.5 text-xs font-bold uppercase tracking-wider rounded-full transition-all border ${
|
||||||
|
selectedCategory === cat
|
||||||
|
? "bg-ink text-white border-ink"
|
||||||
|
: "bg-white text-subtle border-gray-200 hover:border-gray-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{cat}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search Bar */}
|
||||||
|
<div className="relative w-full md:w-64 group">
|
||||||
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||||
|
<SearchIcon
|
||||||
|
size={14}
|
||||||
|
className="text-gray-400 group-focus-within:text-ink"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
className="block w-full pl-9 pr-3 py-2 border-b-2 border-gray-200 bg-transparent text-sm font-mono text-ink focus:outline-none focus:border-ink transition-colors placeholder:text-gray-400"
|
||||||
|
placeholder={t.search_placeholder}
|
||||||
|
/>
|
||||||
|
{searchQuery && (
|
||||||
|
<button
|
||||||
|
onClick={() => setSearchQuery("")}
|
||||||
|
className="absolute inset-y-0 right-0 pr-2 flex items-center text-gray-400 hover:text-ink"
|
||||||
|
>
|
||||||
|
<X size={14} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Results List */}
|
||||||
|
<div className="space-y-16">
|
||||||
|
{filteredArticles.length > 0 ? (
|
||||||
|
filteredArticles.map((article) => (
|
||||||
|
<article
|
||||||
|
key={article.id}
|
||||||
|
className="group relative grid grid-cols-1 md:grid-cols-12 gap-8 p-6 -mx-6 rounded-lg hover:bg-gray-50 transition-colors border border-transparent hover:border-gray-100"
|
||||||
|
>
|
||||||
|
{/* Metadata Column */}
|
||||||
|
<div className="md:col-span-3 flex flex-col gap-2">
|
||||||
|
<span className="font-mono text-xs font-bold text-subtle">
|
||||||
|
{article.date}
|
||||||
|
</span>
|
||||||
|
<span className="font-sans text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||||
|
{article.category}
|
||||||
|
</span>
|
||||||
|
<div className="flex flex-wrap gap-2 mt-2">
|
||||||
|
{article.tags.slice(0, 2).map((tag) => (
|
||||||
|
<span
|
||||||
|
key={tag}
|
||||||
|
className="inline-flex px-2 py-0.5 bg-gray-200/50 text-[10px] text-gray-600 rounded-sm font-mono"
|
||||||
|
>
|
||||||
|
#{tag}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content Column */}
|
||||||
|
<div className="md:col-span-9">
|
||||||
|
<h2 className="font-serif text-2xl font-bold text-ink mb-3 group-hover:text-accent transition-colors">
|
||||||
|
<Link
|
||||||
|
to={
|
||||||
|
article.id === "lora-without-regret"
|
||||||
|
? "/research/lora-without-regret"
|
||||||
|
: "#"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{article.title}
|
||||||
|
</Link>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="mb-4 font-sans text-sm text-subtle italic">
|
||||||
|
{article.authors}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="font-serif text-lg text-gray-600 leading-relaxed mb-6">
|
||||||
|
{article.abstract}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
to={
|
||||||
|
article.id === "lora-without-regret"
|
||||||
|
? "/research/lora-without-regret"
|
||||||
|
: "#"
|
||||||
|
}
|
||||||
|
className="inline-flex items-center text-xs font-bold uppercase tracking-widest text-ink group-hover:text-accent transition-colors border-b border-transparent group-hover:border-accent pb-0.5"
|
||||||
|
>
|
||||||
|
{t.read_paper} <ArrowRight className="ml-2 w-3 h-3" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className="py-24 text-center border border-dashed border-gray-200 rounded-lg">
|
||||||
|
<Filter size={48} className="mx-auto text-gray-200 mb-4" />
|
||||||
|
<p className="font-serif text-subtle text-lg">{t.no_results}</p>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setSearchQuery("");
|
||||||
|
setSelectedCategory(language === "en" ? "All" : "ทั้งหมด");
|
||||||
|
}}
|
||||||
|
className="mt-4 text-sm font-bold text-ink underline"
|
||||||
|
>
|
||||||
|
Clear filters
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
198
pages/Services.tsx
Normal file
198
pages/Services.tsx
Normal file
@ -0,0 +1,198 @@
|
|||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { TerminalBlock } from '../components/TerminalBlock';
|
||||||
|
import { Check, ArrowRight } from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
export const Services: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<div className="bg-paper min-h-screen pt-24 pb-24">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
|
||||||
|
<header className="max-w-3xl mb-24">
|
||||||
|
<h1 className="font-serif text-4xl md:text-5xl text-ink leading-tight mb-8">
|
||||||
|
Services
|
||||||
|
</h1>
|
||||||
|
<p className="font-serif text-xl text-subtle leading-relaxed border-l-4 border-ink pl-6">
|
||||||
|
We operate at the intersection of software engineering and machine learning research. Our engagements are typically project-based or retainer-style for high-growth technical teams who need to ship, not just explore.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="space-y-32">
|
||||||
|
{/* Service Block 1: MVP */}
|
||||||
|
<section className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center border-t border-gray-200 pt-16">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-4 mb-4">
|
||||||
|
<span className="font-sans font-bold text-xs uppercase tracking-widest text-accent">01 — Prototyping</span>
|
||||||
|
<div className="h-px bg-gray-200 flex-grow"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="font-serif text-3xl text-ink mb-6">Accelerated MVP</h3>
|
||||||
|
<p className="font-serif text-lg text-subtle leading-relaxed mb-8">
|
||||||
|
We help founders and technical leads validate AI hypotheses quickly. Instead of spending months hiring a full ML team, we deliver a production-ready prototype in 4-6 weeks.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul className="space-y-4 font-sans text-sm text-gray-600 mb-8">
|
||||||
|
{[
|
||||||
|
"Full stack implementation (React + Python/Node)",
|
||||||
|
"Model selection (Gemini, Claude, OpenAI) & prompt engineering",
|
||||||
|
"Basic evaluation pipeline setup",
|
||||||
|
"Deployment to your cloud (AWS/GCP)"
|
||||||
|
].map((item, i) => (
|
||||||
|
<li key={i} className="flex items-start">
|
||||||
|
<Check className="w-5 h-5 text-green-600 mr-3 shrink-0" />
|
||||||
|
<span>{item}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute -inset-4 bg-gray-100 rounded-lg transform rotate-2 z-0"></div>
|
||||||
|
<TerminalBlock
|
||||||
|
title="api/routes.py"
|
||||||
|
lines={[
|
||||||
|
"@app.post('/generate')",
|
||||||
|
"async def generate_insight(ctx: Context):",
|
||||||
|
" # Production-ready guardrails",
|
||||||
|
" if not guardrails.check(ctx.prompt):",
|
||||||
|
" raise SecurityException('Injection detected')",
|
||||||
|
"",
|
||||||
|
" # Structured output with retries",
|
||||||
|
" response = await llm.generate(",
|
||||||
|
" model='gemini-2.5-flash',",
|
||||||
|
" prompt=build_prompt(ctx),",
|
||||||
|
" schema=InsightSchema",
|
||||||
|
" )",
|
||||||
|
" return response"
|
||||||
|
]}
|
||||||
|
className="relative z-10 shadow-2xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Service Block 2: Audit */}
|
||||||
|
<section className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center border-t border-gray-200 pt-16">
|
||||||
|
<div className="lg:order-2">
|
||||||
|
<div className="flex items-center gap-4 mb-4">
|
||||||
|
<span className="font-sans font-bold text-xs uppercase tracking-widest text-accent">02 — Architecture</span>
|
||||||
|
<div className="h-px bg-gray-200 flex-grow"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="font-serif text-3xl text-ink mb-6">RAG & System Audit</h3>
|
||||||
|
<p className="font-serif text-lg text-subtle leading-relaxed mb-8">
|
||||||
|
Your retrieval system is likely the bottleneck. We perform a rigorous audit of your embedding strategies, chunking logic, and reranking stages to improve context relevance and reduce hallucinations.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul className="space-y-4 font-sans text-sm text-gray-600 mb-8">
|
||||||
|
{[
|
||||||
|
"Vector Database Indexing Strategy Review",
|
||||||
|
"Embedding Latency & Cost Analysis",
|
||||||
|
"Context Window Optimization",
|
||||||
|
"Security & Prompt Injection Vulnerability Scan"
|
||||||
|
].map((item, i) => (
|
||||||
|
<li key={i} className="flex items-start">
|
||||||
|
<Check className="w-5 h-5 text-green-600 mr-3 shrink-0" />
|
||||||
|
<span>{item}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="lg:order-1 relative">
|
||||||
|
<div className="absolute -inset-4 bg-gray-100 rounded-lg transform -rotate-1 z-0"></div>
|
||||||
|
<TerminalBlock
|
||||||
|
title="audit_report.json"
|
||||||
|
lines={[
|
||||||
|
"{",
|
||||||
|
" 'system_health': 'DEGRADED',",
|
||||||
|
" 'metrics': {",
|
||||||
|
" 'retrieval_precision_at_5': 0.42,",
|
||||||
|
" 'average_latency_ms': 1250,",
|
||||||
|
" 'hallucination_rate': '15%'",
|
||||||
|
" },",
|
||||||
|
" 'critical_findings': [",
|
||||||
|
" 'Embedding dimension mismatch in legacy index',",
|
||||||
|
" 'Missing semantic cache for frequent queries'",
|
||||||
|
" ],",
|
||||||
|
" 'recommendation': 'Migrate to hybrid search'",
|
||||||
|
"}"
|
||||||
|
]}
|
||||||
|
className="relative z-10 shadow-2xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Service Block 3: Integration */}
|
||||||
|
<section className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center border-t border-gray-200 pt-16">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-4 mb-4">
|
||||||
|
<span className="font-sans font-bold text-xs uppercase tracking-widest text-accent">03 — Fine-tuning</span>
|
||||||
|
<div className="h-px bg-gray-200 flex-grow"></div>
|
||||||
|
</div>
|
||||||
|
<h3 className="font-serif text-3xl text-ink mb-6">Custom Model Integration</h3>
|
||||||
|
<p className="font-serif text-lg text-subtle leading-relaxed mb-8">
|
||||||
|
When prompt engineering hits a wall, we fine-tune open weights (Llama 3, Mistral, Gemma) on your proprietary data. We handle the data cleaning, training runs (LoRA/QLoRA), and deployment optimization.
|
||||||
|
</p>
|
||||||
|
<ul className="space-y-4 font-sans text-sm text-gray-600 mb-8">
|
||||||
|
{[
|
||||||
|
"Dataset curation and cleaning pipelines",
|
||||||
|
"Parameter-Efficient Fine-Tuning (LoRA)",
|
||||||
|
"Evaluation against base model benchmarks",
|
||||||
|
"Private cloud deployment (AWS/GCP/Azure)"
|
||||||
|
].map((item, i) => (
|
||||||
|
<li key={i} className="flex items-start">
|
||||||
|
<Check className="w-5 h-5 text-green-600 mr-3 shrink-0" />
|
||||||
|
<span>{item}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute -inset-4 bg-gray-100 rounded-lg transform rotate-1 z-0"></div>
|
||||||
|
<TerminalBlock
|
||||||
|
title="train_lora.sh"
|
||||||
|
lines={[
|
||||||
|
"$ torchrun --nproc_per_node=8 train.py \\",
|
||||||
|
" --model_name 'mistralai/Mistral-7B' \\",
|
||||||
|
" --data_path './proprietary_docs' \\",
|
||||||
|
" --output_dir './finetuned_weights' \\",
|
||||||
|
" --use_lora True \\",
|
||||||
|
" --lora_r 16 \\",
|
||||||
|
" --lora_alpha 32 \\",
|
||||||
|
" --quantization '4bit'",
|
||||||
|
"",
|
||||||
|
"# Training started...",
|
||||||
|
"# Epoch 1: loss=0.45",
|
||||||
|
"# Epoch 2: loss=0.32"
|
||||||
|
]}
|
||||||
|
className="relative z-10 shadow-2xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="bg-ink text-white p-12 md:p-16 rounded-sm mt-12 text-center relative overflow-hidden">
|
||||||
|
<div className="relative z-10">
|
||||||
|
<h3 className="font-serif text-3xl mb-6">Ready to build?</h3>
|
||||||
|
<p className="font-sans text-gray-300 mb-10 max-w-lg mx-auto text-lg">
|
||||||
|
We take on a limited number of clients per quarter to ensure deep technical focus on every project.
|
||||||
|
</p>
|
||||||
|
<a href="mailto:hello@pradit.app" className="inline-flex items-center bg-white text-ink font-bold py-4 px-10 hover:bg-gray-100 transition-colors rounded-sm">
|
||||||
|
Schedule Consultation <ArrowRight className="ml-2 w-5 h-5" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{/* Background decoration */}
|
||||||
|
<div className="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
|
||||||
|
<div className="grid grid-cols-12 h-full">
|
||||||
|
{[...Array(12)].map((_, i) => (
|
||||||
|
<div key={i} className="border-r border-white/20 h-full"></div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
1138
pnpm-lock.yaml
Normal file
1138
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
29
tsconfig.json
Normal file
29
tsconfig.json
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"useDefineForClassFields": false,
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": [
|
||||||
|
"ES2022",
|
||||||
|
"DOM",
|
||||||
|
"DOM.Iterable"
|
||||||
|
],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"types": [
|
||||||
|
"node"
|
||||||
|
],
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"allowJs": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"./*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"noEmit": true
|
||||||
|
}
|
||||||
|
}
|
||||||
23
vite.config.ts
Normal file
23
vite.config.ts
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import path from 'path';
|
||||||
|
import { defineConfig, loadEnv } from 'vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
|
||||||
|
export default defineConfig(({ mode }) => {
|
||||||
|
const env = loadEnv(mode, '.', '');
|
||||||
|
return {
|
||||||
|
server: {
|
||||||
|
port: 3000,
|
||||||
|
host: '0.0.0.0',
|
||||||
|
},
|
||||||
|
plugins: [react()],
|
||||||
|
define: {
|
||||||
|
'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
|
||||||
|
'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, '.'),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user