Add files page and router, update settings, sessions, and notes
This commit is contained in:
KansaiGaijin
@@ -5,6 +5,7 @@ import Sessions from './pages/Sessions';
|
||||
import SessionDetail from './pages/SessionDetail';
|
||||
import Speakers from './pages/Speakers';
|
||||
import Notes from './pages/Notes';
|
||||
import Files from './pages/Files';
|
||||
import Settings from './pages/Settings';
|
||||
import Diagnostics from './pages/Diagnostics';
|
||||
import { api } from './api';
|
||||
@@ -45,6 +46,7 @@ function App() {
|
||||
<Route path="/sessions/:id" element={<SessionDetail />} />
|
||||
<Route path="/sessions/:id/speakers" element={<Speakers />} />
|
||||
<Route path="/sessions/:id/notes" element={<Notes />} />
|
||||
<Route path="/files" element={<Files />} />
|
||||
<Route path="/settings" element={<Settings />} />
|
||||
<Route path="/diagnostics" element={<Diagnostics />} />
|
||||
<Route path="*" element={<Navigate to="/" />} />
|
||||
|
||||
@@ -133,8 +133,12 @@ export const api = {
|
||||
if (!res.ok) throw new Error('Notes not generated yet');
|
||||
return res.json();
|
||||
},
|
||||
generateNotes: async (sessionId: string): Promise<{ job_id: string }> => {
|
||||
const res = await fetch(`${BASE_URL}/sessions/${sessionId}/notes/generate`, { method: 'POST' });
|
||||
generateNotes: async (sessionId: string, options?: { player_recap_style?: string; player_recap_custom_prompt?: string }): Promise<{ job_id: string }> => {
|
||||
const res = await fetch(`${BASE_URL}/sessions/${sessionId}/notes/generate`, {
|
||||
method: 'POST',
|
||||
headers: options ? { 'Content-Type': 'application/json' } : undefined,
|
||||
body: options ? JSON.stringify(options) : undefined,
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to start note generation');
|
||||
return res.json();
|
||||
},
|
||||
@@ -189,4 +193,36 @@ export const api = {
|
||||
}
|
||||
return lastResult;
|
||||
},
|
||||
|
||||
// Files
|
||||
browseFiles: async (path?: string): Promise<{ entries: any[]; current_path: string; parent_path: string | null }> => {
|
||||
const qs = path ? `?path=${encodeURIComponent(path)}` : '';
|
||||
const res = await fetch(`${BASE_URL}/files/browse${qs}`);
|
||||
if (!res.ok) throw new Error('Failed to browse files');
|
||||
return res.json();
|
||||
},
|
||||
deleteFiles: async (paths: string[]): Promise<{ deleted: string[]; errors: any[] }> => {
|
||||
const res = await fetch(`${BASE_URL}/files`, { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ paths }) });
|
||||
if (!res.ok) throw new Error('Failed to delete files');
|
||||
return res.json();
|
||||
},
|
||||
uploadFile: async (file: File, dir?: string): Promise<{ path: string }> => {
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
if (dir) form.append('dir', dir);
|
||||
const res = await fetch(`${BASE_URL}/files/upload`, { method: 'POST', body: form });
|
||||
if (!res.ok) throw new Error('Failed to upload file');
|
||||
return res.json();
|
||||
},
|
||||
copyFile: async (source: string, dest_dir?: string): Promise<{ source: string; dest: string }> => {
|
||||
const res = await fetch(`${BASE_URL}/files/copy`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ source, dest_dir }) });
|
||||
if (!res.ok) throw new Error('Failed to copy file');
|
||||
return res.json();
|
||||
},
|
||||
downloadFileUrl: (path: string): string => {
|
||||
return `${BASE_URL}/files/download?path=${encodeURIComponent(path)}`;
|
||||
},
|
||||
viewFileUrl: (path: string): string => {
|
||||
return `${BASE_URL}/files/view?path=${encodeURIComponent(path)}`;
|
||||
},
|
||||
};
|
||||
|
||||
336
frontend/src/pages/Files.tsx
Normal file
336
frontend/src/pages/Files.tsx
Normal file
@@ -0,0 +1,336 @@
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { api } from "../api";
|
||||
|
||||
function formatSize(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
function formatDate(ts: number): string {
|
||||
if (!ts) return "-";
|
||||
return new Date(ts * 1000).toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric", hour: "2-digit", minute: "2-digit" });
|
||||
}
|
||||
|
||||
function Breadcrumb({ path, onNavigate }: { path: string; onNavigate: (p: string) => void }) {
|
||||
const parts = path ? path.split("/") : [];
|
||||
return (
|
||||
<nav className="flex items-center gap-1 text-sm font-mono mb-6 text-ink/60">
|
||||
<button className="hover:text-brass" onClick={() => onNavigate("")}>Files</button>
|
||||
{parts.map((part, i) => {
|
||||
const full = parts.slice(0, i + 1).join("/");
|
||||
const isLast = i === parts.length - 1;
|
||||
return (
|
||||
<span key={full} className="flex items-center gap-1">
|
||||
<span className="text-ink/30">/</span>
|
||||
{isLast ? (
|
||||
<span className="text-ink/90 font-semibold">{part}</span>
|
||||
) : (
|
||||
<button className="hover:text-brass" onClick={() => onNavigate(full)}>{part}</button>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
const AUDIO_EXTS = new Set([".wav", ".mp3", ".mp4", ".m4a", ".ogg", ".flac"]);
|
||||
|
||||
function isAudio(name: string) {
|
||||
return AUDIO_EXTS.has(name.slice(name.lastIndexOf(".")).toLowerCase());
|
||||
}
|
||||
|
||||
function isText(path: string) {
|
||||
return path.startsWith("notes/") || path.endsWith(".json") || path.endsWith(".txt");
|
||||
}
|
||||
|
||||
export default function Files() {
|
||||
const [entries, setEntries] = useState<any[]>([]);
|
||||
const [currentPath, setCurrentPath] = useState("");
|
||||
const [parentPath, setParentPath] = useState<string | null>(null);
|
||||
const [selectedPaths, setSelectedPaths] = useState<Set<string>>(new Set());
|
||||
const [copiedFile, setCopiedFile] = useState<{ path: string; name: string } | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [toast, setToast] = useState<string | null>(null);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [expandedPath, setExpandedPath] = useState<string | null>(null);
|
||||
const [expandedContent, setExpandedContent] = useState<string | null>(null);
|
||||
const [expanding, setExpanding] = useState(false);
|
||||
|
||||
const load = useCallback(async (path: string) => {
|
||||
setLoading(true);
|
||||
setExpandedPath(null);
|
||||
setExpandedContent(null);
|
||||
try {
|
||||
const res = await api.browseFiles(path || undefined);
|
||||
setEntries(res.entries);
|
||||
setCurrentPath(res.current_path);
|
||||
setParentPath(res.parent_path);
|
||||
} catch { setEntries([]); }
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(currentPath); }, []);
|
||||
|
||||
const navigate = (path: string) => {
|
||||
setSelectedPaths(new Set());
|
||||
load(path);
|
||||
};
|
||||
|
||||
const showToast = (msg: string) => {
|
||||
setToast(msg);
|
||||
setTimeout(() => setToast(null), 2000);
|
||||
};
|
||||
|
||||
// Keyboard shortcuts
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
const tag = (e.target as HTMLElement)?.tagName;
|
||||
if (tag === "INPUT" || tag === "TEXTAREA") return;
|
||||
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === "c") {
|
||||
e.preventDefault();
|
||||
if (selectedPaths.size > 0) {
|
||||
const first = entries.find(f => selectedPaths.has(f.path));
|
||||
if (first) { setCopiedFile({ path: first.path, name: first.name }); showToast(`Copied: ${first.name}`); }
|
||||
}
|
||||
}
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === "v") {
|
||||
e.preventDefault();
|
||||
if (copiedFile) handlePaste();
|
||||
}
|
||||
if (e.key === "Delete" && selectedPaths.size > 0) handleDelete();
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === "a") {
|
||||
e.preventDefault();
|
||||
setSelectedPaths(new Set(entries.map(e => e.path)));
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", handler);
|
||||
return () => window.removeEventListener("keydown", handler);
|
||||
}, [selectedPaths, copiedFile, entries]);
|
||||
|
||||
const toggleSelect = (path: string) => {
|
||||
setSelectedPaths(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(path)) next.delete(path);
|
||||
else next.add(path);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
const paths = Array.from(selectedPaths);
|
||||
if (paths.length === 0) return;
|
||||
if (!confirm(`Delete ${paths.length} item(s)?`)) return;
|
||||
try {
|
||||
const res = await api.deleteFiles(paths);
|
||||
setSelectedPaths(new Set());
|
||||
setExpandedPath(null);
|
||||
setExpandedContent(null);
|
||||
showToast(`Deleted ${res.deleted.length} item(s)`);
|
||||
load(currentPath);
|
||||
} catch (e: any) {
|
||||
showToast(e.message || "Delete failed");
|
||||
}
|
||||
};
|
||||
|
||||
const handlePaste = async () => {
|
||||
if (!copiedFile) return;
|
||||
try {
|
||||
const res = await api.copyFile(copiedFile.path, currentPath || undefined);
|
||||
setCopiedFile(null);
|
||||
showToast(`Pasted as: ${res.dest.split("/").pop()}`);
|
||||
load(currentPath);
|
||||
} catch (e: any) {
|
||||
showToast(e.message || "Paste failed");
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpload = async () => {
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.onchange = async () => {
|
||||
const file = input.files?.[0];
|
||||
if (!file) return;
|
||||
setUploading(true);
|
||||
try {
|
||||
await api.uploadFile(file, currentPath || undefined);
|
||||
showToast("Uploaded");
|
||||
load(currentPath);
|
||||
} catch (e: any) {
|
||||
showToast(e.message || "Upload failed");
|
||||
}
|
||||
setUploading(false);
|
||||
};
|
||||
input.click();
|
||||
};
|
||||
|
||||
const handleExpand = async (entry: any) => {
|
||||
if (expandedPath === entry.path) {
|
||||
setExpandedPath(null);
|
||||
setExpandedContent(null);
|
||||
return;
|
||||
}
|
||||
setExpandedPath(entry.path);
|
||||
if (isAudio(entry.name)) {
|
||||
setExpandedContent(null);
|
||||
} else if (isText(entry.path)) {
|
||||
setExpanding(true);
|
||||
try {
|
||||
const res = await fetch(api.viewFileUrl(entry.path));
|
||||
const text = await res.text();
|
||||
setExpandedContent(text);
|
||||
} catch {
|
||||
setExpandedContent("(failed to load)");
|
||||
}
|
||||
setExpanding(false);
|
||||
}
|
||||
};
|
||||
|
||||
const selectedCount = selectedPaths.size;
|
||||
const dirs = entries.filter(e => e.type === "dir");
|
||||
const files = entries.filter(e => e.type === "file");
|
||||
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto py-16 px-4">
|
||||
{toast && (
|
||||
<div className="fixed top-4 left-1/2 -translate-x-1/2 z-50 bg-emerald-700 text-white px-5 py-3 rounded-xl shadow-2xl text-sm font-medium">
|
||||
{toast}
|
||||
</div>
|
||||
)}
|
||||
<Link to="/" className="text-sm text-ink/40 hover:text-brass">← Back</Link>
|
||||
<h1 className="font-display text-3xl mt-4 mb-2">File Browser</h1>
|
||||
|
||||
<Breadcrumb path={currentPath} onNavigate={navigate} />
|
||||
|
||||
{/* Toolbar */}
|
||||
<div className="card p-4 mb-6">
|
||||
<div className="flex items-center justify-between flex-wrap gap-3">
|
||||
<div className="flex gap-2">
|
||||
<button className="btn-secondary text-sm" onClick={() => navigate(parentPath || "")} disabled={!parentPath}>
|
||||
↑ Up
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex gap-2 items-center">
|
||||
{copiedFile && (
|
||||
<span className="text-xs text-brass font-mono truncate max-w-[200px]" title={copiedFile.path}>
|
||||
Clipboard: {copiedFile.name}
|
||||
</span>
|
||||
)}
|
||||
<button className="btn-secondary text-sm" onClick={handleUpload} disabled={uploading}>
|
||||
{uploading ? "Uploading..." : "Upload"}
|
||||
</button>
|
||||
<button className="btn-secondary text-sm" onClick={() => {
|
||||
if (selectedPaths.size > 0) {
|
||||
const first = entries.find(f => selectedPaths.has(f.path));
|
||||
if (first) { setCopiedFile({ path: first.path, name: first.name }); showToast(`Copied: ${first.name}`); }
|
||||
}
|
||||
}} disabled={selectedCount === 0}>Copy</button>
|
||||
<button className="btn-secondary text-sm" onClick={handlePaste} disabled={!copiedFile}>Paste</button>
|
||||
<button className="btn-secondary text-sm" onClick={handleDelete} disabled={selectedCount === 0}>Delete</button>
|
||||
<button className="btn-secondary text-sm" onClick={() => {
|
||||
const first = entries.find(f => selectedPaths.has(f.path));
|
||||
if (first) window.open(api.downloadFileUrl(first.path), "_blank");
|
||||
}} disabled={selectedCount !== 1}>Download</button>
|
||||
</div>
|
||||
</div>
|
||||
{selectedCount > 0 && (
|
||||
<div className="mt-2 text-xs text-ink/40">
|
||||
{selectedCount} selected · <button className="underline hover:text-brass" onClick={() => setSelectedPaths(new Set())}>clear</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Entry list */}
|
||||
<div className="card overflow-hidden">
|
||||
{loading ? (
|
||||
<div className="p-6 text-center text-ink/40">Loading...</div>
|
||||
) : entries.length === 0 ? (
|
||||
<div className="p-6 text-center text-ink/40">This folder is empty.</div>
|
||||
) : (
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-white/10 text-ink/50 text-xs uppercase tracking-wider">
|
||||
<th className="p-3 w-10">
|
||||
<input type="checkbox" className="accent-brass" checked={selectedPaths.size === entries.length} onChange={() => {
|
||||
if (selectedPaths.size === entries.length) setSelectedPaths(new Set());
|
||||
else setSelectedPaths(new Set(entries.map(e => e.path)));
|
||||
}} />
|
||||
</th>
|
||||
<th className="p-3 text-left">Name</th>
|
||||
<th className="p-3 text-left w-24">Type</th>
|
||||
<th className="p-3 text-left w-40">Session</th>
|
||||
<th className="p-3 text-right w-20">Size</th>
|
||||
<th className="p-3 text-right w-32">Modified</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{[...dirs, ...files].map((e) => {
|
||||
const checked = selectedPaths.has(e.path);
|
||||
const isExpanded = expandedPath === e.path;
|
||||
return (
|
||||
<tbody key={e.path}>
|
||||
<tr
|
||||
className={`border-b border-white/5 hover:bg-white/5 cursor-pointer ${checked ? "bg-brass/5" : ""} ${isExpanded ? "bg-white/[0.03]" : ""}`}
|
||||
onClick={() => {
|
||||
if (e.type === "dir") navigate(e.path);
|
||||
else handleExpand(e);
|
||||
}}
|
||||
>
|
||||
<td className="p-3 w-10" onClick={(ev) => { ev.stopPropagation(); toggleSelect(e.path); }}>
|
||||
<input type="checkbox" className="accent-brass" checked={checked} readOnly />
|
||||
</td>
|
||||
<td className="p-3 font-mono text-xs truncate max-w-[300px]" title={e.name}>
|
||||
<span className="mr-2">{e.type === "dir" ? "\uD83D\uDCC1" : isExpanded ? "\u25BC" : "\uD83D\uDCC4"}</span>
|
||||
{e.type === "dir" ? (
|
||||
<button className="hover:text-brass text-left" onClick={() => navigate(e.path)}>{e.name}</button>
|
||||
) : (
|
||||
<button className="hover:text-brass text-left">{e.name}</button>
|
||||
)}
|
||||
</td>
|
||||
<td className="p-3">
|
||||
<span className="px-2 py-0.5 rounded text-xs font-medium bg-white/5 text-ink/60">
|
||||
{e.type === "dir" ? "Folder" : e.notes_kind === "dm_notes" ? "DM Notes" : e.notes_kind === "player_recap" ? "Player Recap" : (e.path?.startsWith("notes") ? "Notes" : e.path?.startsWith("transcriptions") ? "Transcript" : "Audio")}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-3 truncate max-w-[160px]" title={e.session_name}>
|
||||
{e.session_name && e.session_name !== "(orphan)" ? (
|
||||
<Link to={`/sessions/${e.session_id}`} className="hover:text-brass" onClick={(ev) => ev.stopPropagation()}>{e.session_name}</Link>
|
||||
) : e.session_name ? (
|
||||
<span className="text-ink/40">{e.session_name}</span>
|
||||
) : (
|
||||
<span className="text-ink/20">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="p-3 text-right text-ink/50 font-mono text-xs">{e.size != null ? formatSize(e.size) : "-"}</td>
|
||||
<td className="p-3 text-right text-ink/50 text-xs">{e.modified_at != null ? formatDate(e.modified_at) : "-"}</td>
|
||||
</tr>
|
||||
{isExpanded && (
|
||||
<tr className="border-b border-white/5">
|
||||
<td colSpan={6} className="p-0">
|
||||
<div className="bg-black/20 px-4 py-4">
|
||||
{isAudio(e.name) ? (
|
||||
<audio controls className="w-full max-w-xl" src={api.viewFileUrl(e.path)} autoPlay>
|
||||
Your browser does not support audio playback.
|
||||
</audio>
|
||||
) : expanding ? (
|
||||
<div className="text-ink/40 text-xs">Loading...</div>
|
||||
) : (
|
||||
<pre className="text-xs text-ink/80 whitespace-pre-wrap font-mono leading-relaxed max-h-[60vh] overflow-y-auto">
|
||||
{expandedContent}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
);
|
||||
})}
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -27,8 +27,18 @@ export default function Notes() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="card p-6 whitespace-pre-wrap leading-relaxed">
|
||||
{tab === "dm" ? notes.dm_notes : notes.player_recap}
|
||||
<div className="card p-6">
|
||||
{tab === "player" && notes.player_recap_prompt && (
|
||||
<div className="mb-6 pb-4 border-b border-white/10">
|
||||
<span className="eyebrow">Prompt used</span>
|
||||
<pre className="bg-black/30 border border-white/10 rounded p-3 text-xs text-ink/70 mt-2 whitespace-pre-wrap font-mono leading-relaxed">
|
||||
{notes.player_recap_prompt}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
<div className="whitespace-pre-wrap leading-relaxed">
|
||||
{tab === "dm" ? notes.dm_notes : notes.player_recap}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -210,9 +210,17 @@ export default function SessionDetail() {
|
||||
load();
|
||||
};
|
||||
|
||||
const [showStyleModal, setShowStyleModal] = useState(false);
|
||||
const [styleChoice, setStyleChoice] = useState<'story' | 'diary' | 'bullets' | 'custom'>('story');
|
||||
const [customPrompt, setCustomPrompt] = useState('');
|
||||
|
||||
const generateNotes = async () => {
|
||||
if (!id) return;
|
||||
await api.generateNotes(id);
|
||||
const opts = styleChoice === 'custom'
|
||||
? { player_recap_style: styleChoice, player_recap_custom_prompt: customPrompt }
|
||||
: { player_recap_style: styleChoice };
|
||||
await api.generateNotes(id, opts);
|
||||
setShowStyleModal(false);
|
||||
load();
|
||||
};
|
||||
|
||||
@@ -248,10 +256,43 @@ export default function SessionDetail() {
|
||||
)}
|
||||
{session.status === 'complete' && (
|
||||
<div className="mt-4 flex gap-3">
|
||||
<button className="btn-secondary" onClick={generateNotes}>Regenerate notes</button>
|
||||
<button className="btn-secondary" onClick={() => setShowStyleModal(true)}>Regenerate notes</button>
|
||||
<Link to={`/sessions/${id}/notes`} className="btn-primary">View notes</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showStyleModal && (
|
||||
<div className="fixed inset-0 bg-black/60 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-panel border border-white/10 max-w-md w-full rounded-xl p-6 shadow-2xl">
|
||||
<h4 className="text-lg font-bold mb-4">Player Recap Style</h4>
|
||||
<p className="text-sm text-ink/60 mb-4 leading-relaxed">
|
||||
Choose how you'd like the player-facing recap to be written.
|
||||
</p>
|
||||
<select
|
||||
className="input mb-4"
|
||||
value={styleChoice}
|
||||
onChange={(e) => setStyleChoice(e.target.value as any)}
|
||||
>
|
||||
<option value="story">Story Recap</option>
|
||||
<option value="diary">Dear Diary</option>
|
||||
<option value="bullets">Bullet Points</option>
|
||||
<option value="custom">Custom Prompt</option>
|
||||
</select>
|
||||
{styleChoice === 'custom' && (
|
||||
<textarea
|
||||
className="input min-h-[100px] mb-4"
|
||||
placeholder="Enter your custom prompt for the player recap..."
|
||||
value={customPrompt}
|
||||
onChange={(e) => setCustomPrompt(e.target.value)}
|
||||
/>
|
||||
)}
|
||||
<div className="flex justify-end gap-3">
|
||||
<button className="btn-secondary text-sm" onClick={() => setShowStyleModal(false)}>Cancel</button>
|
||||
<button className="btn-primary text-sm" onClick={generateNotes}>Generate</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -87,6 +87,7 @@ export default function Sessions() {
|
||||
</div>
|
||||
|
||||
<div className="mt-10 flex gap-4">
|
||||
<Link to="/files" className="text-sm text-ink/40 hover:text-brass">Files</Link>
|
||||
<Link to="/diagnostics" className="text-sm text-ink/40 hover:text-brass">System check</Link>
|
||||
<Link to="/settings" className="text-sm text-ink/40 hover:text-brass">Settings</Link>
|
||||
</div>
|
||||
|
||||
@@ -21,58 +21,60 @@ export default function Settings() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-xl mx-auto py-16 px-4">
|
||||
<div className="max-w-4xl mx-auto py-16 px-4">
|
||||
<Link to="/" className="text-sm text-ink/40 hover:text-brass">← Back</Link>
|
||||
<h1 className="font-display text-3xl mt-4 mb-8">Settings</h1>
|
||||
|
||||
<div className="card p-6 space-y-4 mb-6">
|
||||
<h2 className="eyebrow">Transcription</h2>
|
||||
<select className="input w-full" value={settings.whisper_model} onChange={(e) => set("whisper_model", e.target.value)}>
|
||||
<option value="tiny">Tiny</option>
|
||||
<option value="small">Small</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="large-v3">Large v3</option>
|
||||
</select>
|
||||
<input className="input w-full" type="password" placeholder="HuggingFace token" value={settings.hf_token} onChange={(e) => set("hf_token", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="card p-6 space-y-4 mb-6">
|
||||
<h2 className="eyebrow">Summarization</h2>
|
||||
<div className="flex gap-3">
|
||||
<button className={settings.llm_mode === "ollama" ? "btn-primary" : "btn-secondary"} onClick={() => set("llm_mode", "ollama")}>Local (Ollama)</button>
|
||||
<button className={settings.llm_mode === "api" ? "btn-primary" : "btn-secondary"} onClick={() => set("llm_mode", "api")}>Hosted API</button>
|
||||
<div className="grid grid-cols-2 gap-6 mb-6">
|
||||
<div className="card p-6 space-y-4">
|
||||
<h2 className="eyebrow">Transcription</h2>
|
||||
<select className="input w-full" value={settings.whisper_model} onChange={(e) => set("whisper_model", e.target.value)}>
|
||||
<option value="tiny">Tiny</option>
|
||||
<option value="small">Small</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="large-v3">Large v3</option>
|
||||
</select>
|
||||
<input className="input w-full" type="password" placeholder="HuggingFace token" value={settings.hf_token} onChange={(e) => set("hf_token", e.target.value)} />
|
||||
</div>
|
||||
{settings.llm_mode === "ollama" ? (
|
||||
<>
|
||||
<input className="input w-full" value={settings.ollama_host} onChange={(e) => set("ollama_host", e.target.value)} />
|
||||
<input className="input w-full" value={settings.ollama_model} onChange={(e) => set("ollama_model", e.target.value)} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<input className="input w-full" value={settings.api_base_url} onChange={(e) => set("api_base_url", e.target.value)} />
|
||||
<input className="input w-full" type="password" value={settings.api_key} onChange={(e) => set("api_key", e.target.value)} />
|
||||
<input className="input w-full" value={settings.api_model} onChange={(e) => set("api_model", e.target.value)} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="card p-6 space-y-3 mb-6">
|
||||
<h2 className="eyebrow">Campaign context</h2>
|
||||
<textarea className="input w-full h-32" value={settings.world_context} onChange={(e) => set("world_context", e.target.value)} placeholder="Paste world context directly..." />
|
||||
<input className="input w-full" value={settings.world_context_path} onChange={(e) => set("world_context_path", e.target.value)} placeholder="...or path to a file inside the container" />
|
||||
</div>
|
||||
<div className="card p-6 space-y-4">
|
||||
<h2 className="eyebrow">Summarization</h2>
|
||||
<div className="flex gap-3">
|
||||
<button className={settings.llm_mode === "ollama" ? "btn-primary" : "btn-secondary"} onClick={() => set("llm_mode", "ollama")}>Local (Ollama)</button>
|
||||
<button className={settings.llm_mode === "api" ? "btn-primary" : "btn-secondary"} onClick={() => set("llm_mode", "api")}>Hosted API</button>
|
||||
</div>
|
||||
{settings.llm_mode === "ollama" ? (
|
||||
<>
|
||||
<input className="input w-full" value={settings.ollama_host} onChange={(e) => set("ollama_host", e.target.value)} />
|
||||
<input className="input w-full" value={settings.ollama_model} onChange={(e) => set("ollama_model", e.target.value)} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<input className="input w-full" value={settings.api_base_url} onChange={(e) => set("api_base_url", e.target.value)} />
|
||||
<input className="input w-full" type="password" value={settings.api_key} onChange={(e) => set("api_key", e.target.value)} />
|
||||
<input className="input w-full" value={settings.api_model} onChange={(e) => set("api_model", e.target.value)} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="card p-6 space-y-3 mb-6">
|
||||
<h2 className="eyebrow">Player recap style</h2>
|
||||
<select className="input w-full" value={settings.player_recap_style} onChange={(e) => set("player_recap_style", e.target.value)}>
|
||||
<option value="story">Story Recap (previously on…)</option>
|
||||
<option value="diary">Dear Diary</option>
|
||||
<option value="bullets">Bullet Points</option>
|
||||
<option value="custom">Custom Prompt</option>
|
||||
</select>
|
||||
{settings.player_recap_style === "custom" && (
|
||||
<textarea className="input w-full h-32" value={settings.player_recap_custom_prompt} onChange={(e) => set("player_recap_custom_prompt", e.target.value)} placeholder="Write your own final-combine prompt. Use {'{summaries}'} where the chunk summaries should be inserted." />
|
||||
)}
|
||||
<div className="card p-6 space-y-3">
|
||||
<h2 className="eyebrow">Campaign context</h2>
|
||||
<textarea className="input w-full h-32" value={settings.world_context} onChange={(e) => set("world_context", e.target.value)} placeholder="Paste world context directly..." />
|
||||
<input className="input w-full" value={settings.world_context_path} onChange={(e) => set("world_context_path", e.target.value)} placeholder="...or path to a file inside the container" />
|
||||
</div>
|
||||
|
||||
<div className="card p-6 space-y-3">
|
||||
<h2 className="eyebrow">Player recap style</h2>
|
||||
<select className="input w-full" value={settings.player_recap_style} onChange={(e) => set("player_recap_style", e.target.value)}>
|
||||
<option value="story">Story Recap (previously on…)</option>
|
||||
<option value="diary">Dear Diary</option>
|
||||
<option value="bullets">Bullet Points</option>
|
||||
<option value="custom">Custom Prompt</option>
|
||||
</select>
|
||||
{settings.player_recap_style === "custom" && (
|
||||
<textarea className="input w-full h-32" value={settings.player_recap_custom_prompt} onChange={(e) => set("player_recap_custom_prompt", e.target.value)} placeholder="Write your own final-combine prompt. Use {'{summaries}'} where the chunk summaries should be inserted." />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="btn-primary" onClick={save}>{saved ? "Saved" : "Save settings"}</button>
|
||||
|
||||
Reference in New Issue
Block a user