- {/* Top telemetry specs chips bar */}
- setSidebarVisible(!sidebarVisible)}
- />
-
- {/* Dynamic Workspace Container */}
-
-
+
+
-
- 🎙️ Speech Transcriber
+Local AI audio transcription with Whisper
-
+ )}
+
+ {/* Dialog */}
{dialog && (
+
+
-
+ CPU: {telemetry.cpu_usage}%
+ RAM: {telemetry.ram_used_gb.toFixed(1)}/{telemetry.ram_total_gb.toFixed(1)} GB
+ {telemetry.gpu_name !== "Detecting..." && telemetry.gpu_name !== "Unavailable" && (
+ GPU: {telemetry.gpu_name}
+ )}
+
+
-
+ {/* Navigation Tabs */}
+
-
+ {/* Main Content */}
+
+ {activeTab === "speech" && (
+ )}
-
-
-
-
-
-
diff --git a/app/frontend/src/components/Generator.jsx b/app/frontend/src/components/Generator.jsx
deleted file mode 100644
index f9143bc..0000000
--- a/app/frontend/src/components/Generator.jsx
+++ /dev/null
@@ -1,1001 +0,0 @@
-import React, { memo, useState, useRef, useCallback } from "react";
-import { Sparkles, Download, Copy, RefreshCw, Check, Sliders, Trash2, ImagePlus } from "lucide-react";
-import {
- generateImage,
- startServer,
- stopServer,
- waitForServerReady,
- getBackendStatus,
- getGenerationProgress,
- saveGeneratedOutput,
- deleteGeneratedOutputs,
- getLlmStatus,
- listLlmModels,
- startLlm,
- chatWithLlm
-} from "../services/api";
-
-const GalleryItem = memo(({ img, idx, isSelected, onClick }) => {
- const handleClick = (e) => {
- onClick(idx, e);
- };
- return (
-
- 
- {isSelected && (
-
- );
-});
-
-function Generator({
- prompt,
- setPrompt,
- negativePrompt,
- setNegativePrompt,
- constraints,
- setConstraints,
- activeModel,
- generatedImages,
- setGeneratedImages,
- isGenerating,
- setIsGenerating,
- generationProgress,
- setGenerationProgress,
- setActiveTab,
- showAlert = async ({ message }) => window.alert(message),
- showConfirm = async ({ message }) => window.confirm(message),
- specs,
- textSettings,
-}) {
- const [outputImage, setOutputImage] = useState(null);
- const [outputSeed, setOutputSeed] = useState(null);
- const [genDuration, setGenDuration] = useState(null);
- const [copySuccess, setCopySuccess] = useState(false);
- const [elapsedTime, setElapsedTime] = useState(0);
- const [estimatedLeftTime, setEstimatedLeftTime] = useState(0);
- const [currentStep, setCurrentStep] = useState(0);
- const [generationSpeed, setGenerationSpeed] = useState("");
- const [isCpuFallback, setIsCpuFallback] = useState(false);
- const [isCancelling, setIsCancelling] = useState(false);
- const [isRestartingBackend, setIsRestartingBackend] = useState(false);
- const [restartLoadProgress, setRestartLoadProgress] = useState(null);
- const [errorMsg, setErrorMsg] = useState(null);
- const [isDecoding, setIsDecoding] = useState(false);
- const [selectedGalleryIndexes, setSelectedGalleryIndexes] = useState([]);
- const [baseImage, setBaseImage] = useState(null);
- const [isEnhancing, setIsEnhancing] = useState(false);
- const timerRef = useRef(null);
- const abortControllerRef = useRef(null);
- const hasRealGenerationStepRef = useRef(false);
-
- const handleEnhancePrompt = async () => {
- if (!prompt.trim() || isEnhancing || isGenerating) return;
- setIsEnhancing(true);
- try {
- const status = await getLlmStatus();
- let targetModel = status.settings?.model;
-
- if (!status.ready) {
- const models = await listLlmModels();
- if (models.length === 0) {
- showAlert({
- title: "No Text Models",
- message: "You haven't downloaded any text models yet. Please go to the 'Model Manager' or 'Text Chat' tab to download a GGUF model first.",
- danger: true
- });
- setIsEnhancing(false);
- return;
- }
-
- const savedLlm = localStorage.getItem("selectedLlmModel") || models[0]?.filename;
- targetModel = models.some(m => m.filename === savedLlm) ? savedLlm : models[0]?.filename;
-
- const confirm = await showConfirm({
- title: "Load Text Model?",
- message: `Enhancing your prompt requires loading the local text model "${targetModel}". This will temporarily unload the image model from memory. Do you want to proceed?`,
- confirmLabel: "Load & Enhance",
- cancelLabel: "Cancel"
- });
-
- if (!confirm) {
- setIsEnhancing(false);
- return;
- }
-
- const cores = textSettings?.threads || specs?.cpu_cores_physical || 4;
- const context = textSettings?.contextSize || 2048;
- await startLlm(targetModel, {
- threads: cores,
- contextSize: context,
- gpuLayers: -1,
- preferredBackend: textSettings?.preferredBackend
- });
- }
-
- const systemPrompt = "You are a helpful assistant. Rewrite the user's image prompt to be more descriptive and detailed for image generation. Keep it under 80 words. Output ONLY the rewritten prompt, no explanation or introductory text.";
- const messages = [
- { role: "system", content: systemPrompt },
- { role: "user", content: `Please expand this prompt: "${prompt}"` }
- ];
-
- const temp = textSettings?.temperature || 0.7;
- const response = await chatWithLlm(messages, { temperature: temp, maxTokens: 128 });
- let cleanResponse = response.content.trim();
- if (cleanResponse.startsWith('"') && cleanResponse.endsWith('"')) {
- cleanResponse = cleanResponse.slice(1, -1);
- }
- cleanResponse = cleanResponse.replace(/^Here is the expanded prompt:?\s*/i, "");
- cleanResponse = cleanResponse.replace(/^Enhanced prompt:?\s*/i, "");
-
- setPrompt(cleanResponse);
- } catch (err) {
- showAlert({
- title: "Prompt Enhancement Failed",
- message: err.message || String(err),
- danger: true
- });
- } finally {
- setIsEnhancing(false);
- }
- };
-
- React.useEffect(() => {
- if (constraints.backendType === "apple-npu" || constraints.backendType === "openvino-npu") {
- setBaseImage(null);
- }
- }, [constraints.backendType]);
-
- const handleBaseImageSelect = (e) => {
- const file = e.target.files?.[0];
- e.target.value = "";
- if (!file) return;
- if (!file.type.startsWith("image/")) {
- setErrorMsg("Please choose an image file (PNG, JPG, or WEBP).");
- return;
- }
- const reader = new FileReader();
- reader.onload = () => setBaseImage(reader.result);
- reader.onerror = () => setErrorMsg("Could not read the selected image file.");
- reader.readAsDataURL(file);
- };
-
- const handleClearBaseImage = () => setBaseImage(null);
-
- // Trigger main image generation process
- const handleGenerate = async () => {
- if (!prompt.trim()) return;
-
- setErrorMsg(null);
- setIsRestartingBackend(true);
- setRestartLoadProgress(null);
-
- let needsRestart = false;
- try {
- const status = await getBackendStatus();
- if (status && status.settings) {
- const settings = status.settings;
- const currentModelName = settings.model ? settings.model.split(/[\\/]/).pop() : null;
- const targetModelName = activeModel ? activeModel.split(/[\\/]/).pop() : null;
- const requestedBackend = constraints.backendType || (constraints.useGpu === false ? "cpu" : "auto");
- const currentBackend = settings.backendType || (settings.useGpu === false ? "cpu" : "auto");
- const shouldCompareModel = requestedBackend !== "openvino-npu";
- const isCoreMLBackend = requestedBackend === "apple-npu";
-
- if ((shouldCompareModel && currentModelName !== targetModelName) ||
- (!isCoreMLBackend && parseInt(settings.steps) !== parseInt(constraints.steps)) ||
- (!isCoreMLBackend && Math.abs(parseFloat(settings.cfgScale) - parseFloat(constraints.cfgScale)) > 0.05) ||
- (!isCoreMLBackend && settings.sampler !== constraints.sampler) ||
- (!isCoreMLBackend && parseInt(settings.threads) !== parseInt(constraints.threads)) ||
- Boolean(settings.useGpu) !== (constraints.useGpu !== false) ||
- parseInt(settings.width || 512) !== parseInt(constraints.width || 512) ||
- parseInt(settings.height || 512) !== parseInt(constraints.height || 512) ||
- currentBackend !== requestedBackend) {
- needsRestart = true;
- }
- } else {
- needsRestart = true;
- }
- } catch (e) {
- needsRestart = true;
- }
-
- if (needsRestart) {
- try {
- console.log("Settings out of sync, restarting backend...");
- await startServer(activeModel, constraints);
- let isReady = false;
- let crashError = null;
- const maxStartupPolls = (constraints.backendType === "openvino-npu" || constraints.backendType === "apple-npu") ? 1200 : 240;
- for (let i = 0; i < maxStartupPolls; i++) {
- const status = await getBackendStatus();
- if (status.loading) {
- setRestartLoadProgress({
- progress: status.loading.progress || 0,
- phase: status.loading.phase || "Loading model...",
- speed: status.loading.speed || "",
- current: status.loading.current || 0,
- total: status.loading.total || 0,
- backendMode: status.loading.backendMode || status.settings?.backendMode || "",
- device: status.loading.device || status.settings?.backendDevice || "",
- });
- }
- if (status.ready) {
- isReady = true;
- break;
- }
- if (status.error) {
- crashError = status.error;
- break;
- }
- if (!status.running && !status.loading?.active && i > 3) {
- crashError = "The backend process terminated immediately on startup.";
- break;
- }
- await new Promise((r) => setTimeout(r, 500));
- }
-
- if (!isReady) {
- throw new Error(crashError || "Backend server failed to start after applying configuration changes.");
- }
- } catch (err) {
- console.error("Failed to restart backend:", err);
- setErrorMsg(err.message || "Failed to sync settings with backend.");
- setIsRestartingBackend(false);
- return;
- }
- }
- setIsRestartingBackend(false);
- setRestartLoadProgress(null);
-
- if (timerRef.current) clearInterval(timerRef.current);
- setIsGenerating(true);
- setGenerationProgress(0);
- setElapsedTime(0);
- setCurrentStep(0);
- setGenerationSpeed("");
- hasRealGenerationStepRef.current = false;
- setIsCpuFallback(false);
- setIsDecoding(false);
- setGenDuration(null);
- setOutputImage(null);
-
- // Calculate dynamic step estimation times
- // CPU takes ~35s per step at 512px, ~140s at 1024px. GPU is ~0.04x of CPU time.
- const baseGpuStepTime = (constraints.width >= 1024 ? 140 : 35) * 0.04;
- const baseCpuStepTime = (constraints.width >= 1024 ? 140 : 35);
-
- const gpuSelected = (constraints.backendType || (constraints.useGpu === false ? "cpu" : "auto")) !== "cpu";
- let activeStepTime = gpuSelected ? baseGpuStepTime : baseCpuStepTime;
- let cpuFallbackDetected = false;
- let fallbackTime = 0;
- let fallbackProgress = 0;
- let elapsedSeconds = 0;
-
- setEstimatedLeftTime(Math.round(constraints.steps * activeStepTime));
-
- timerRef.current = setInterval(async () => {
- elapsedSeconds++;
- setElapsedTime(elapsedSeconds);
-
- try {
- const progress = await getGenerationProgress();
- if (progress && progress.active) {
- const decoding = progress.decoding || false;
- setIsDecoding(decoding);
-
- const step = decoding ? (progress.steps || constraints.steps || 20) : (progress.step || 0);
- const steps = progress.steps || constraints.steps || 20;
- const speed = decoding ? "" : (progress.speed || "");
- const numericSpeed = parseFloat(speed);
- const backendMode = String(progress.backendMode || "").toLowerCase();
- const backendDevice = String(progress.backendDevice || "").toLowerCase();
- const isConfirmedGpuBackend = (
- backendMode.includes("gpu") ||
- backendMode.includes("vulkan") ||
- backendMode.includes("cuda") ||
- backendMode.includes("rocm") ||
- backendMode.includes("metal") ||
- backendDevice.includes("vulkan") ||
- backendDevice.includes("cuda") ||
- backendDevice.includes("rocm")
- );
-
- if (decoding || progress.steps > 0) {
- hasRealGenerationStepRef.current = true;
- setCurrentStep(step);
- }
- if (!decoding) {
- setGenerationSpeed(speed);
- } else {
- setGenerationSpeed("decoding");
- }
-
- // Calculate progress percentage
- let progressPercent = 0;
- if (decoding) {
- progressPercent = 99;
- } else if (steps > 0) {
- progressPercent = Math.round((step / steps) * 100);
- }
- progressPercent = Math.min(99, progressPercent);
- if (decoding || progress.steps > 0) {
- setGenerationProgress(progressPercent);
- } else {
- setGenerationProgress((prev) => Math.max(prev, progressPercent));
- }
-
- // Calculate remaining time
- let remaining = 0;
- if (decoding) {
- remaining = 3;
- } else {
- if (!isNaN(numericSpeed) && numericSpeed > 0) {
- const remainingSteps = Math.max(0, steps - step);
- if (speed.includes("it/s")) {
- remaining = remainingSteps / numericSpeed;
- } else if (speed.includes("s/it")) {
- remaining = remainingSteps * numericSpeed;
- }
- } else {
- const activeStepTime = gpuSelected ? baseGpuStepTime : baseCpuStepTime;
- remaining = Math.max(0, (steps - step) * activeStepTime);
- }
- }
-
- // Detect CPU fallback / slow generation if GPU was requested but it runs slow
- if (gpuSelected && !cpuFallbackDetected && !isConfirmedGpuBackend) {
- const isSlowItS = speed.includes("it/s") && numericSpeed < 0.2;
- const isSlowSIt = speed.includes("s/it") && numericSpeed > 5.0;
- if (isSlowItS || isSlowSIt) {
- cpuFallbackDetected = true;
- setIsCpuFallback(true);
- }
- }
-
- setEstimatedLeftTime(Math.round(remaining));
- } else {
- // Creep up slowly while loading the model/preparing
- setGenerationProgress((prev) => Math.min(15, prev + 1));
- setEstimatedLeftTime((prev) => Math.max(1, prev - 1));
- }
- } catch (e) {
- console.warn("Failed to get generation progress, running simulation fallback:", e);
-
- // Fallback simulation logic
- if (gpuSelected && !cpuFallbackDetected && elapsedSeconds > constraints.steps * baseGpuStepTime * 1.3) {
- cpuFallbackDetected = true;
- setIsCpuFallback(true);
- activeStepTime = baseCpuStepTime;
- fallbackTime = elapsedSeconds;
- fallbackProgress = Math.min(95, Math.round((elapsedSeconds / (constraints.steps * baseGpuStepTime)) * 100));
- }
-
- let step = Math.min(constraints.steps - 1, Math.floor(elapsedSeconds / activeStepTime));
- let expectedTotal = constraints.steps * activeStepTime;
- if (elapsedSeconds >= expectedTotal) {
- const computedStepTime = Math.ceil(elapsedSeconds / Math.max(0.5, step));
- activeStepTime = Math.max(activeStepTime + 15, computedStepTime + 15);
- expectedTotal = constraints.steps * activeStepTime;
- step = Math.min(constraints.steps - 1, Math.floor(elapsedSeconds / activeStepTime));
- }
- const remaining = Math.max(1, expectedTotal - elapsedSeconds);
- setEstimatedLeftTime(Math.round(remaining));
-
- let progressPercent = 0;
- if (cpuFallbackDetected) {
- const remainingProgress = 99 - fallbackProgress;
- const remainingTime = expectedTotal - fallbackTime;
- if (remainingTime > 0) {
- const ratio = Math.min(1.0, (elapsedSeconds - fallbackTime) / remainingTime);
- if (ratio < 0.85) {
- progressPercent = Math.round(fallbackProgress + ratio * remainingProgress);
- } else {
- const x = (elapsedSeconds - (fallbackTime + remainingTime * 0.85)) / (activeStepTime * 2);
- const decay = 1 - Math.exp(-x);
- progressPercent = Math.min(99, Math.round(fallbackProgress + 0.85 * remainingProgress + (0.14 * remainingProgress) * decay));
- }
- } else {
- progressPercent = 99;
- }
- } else {
- if (elapsedSeconds < expectedTotal * 0.85) {
- progressPercent = Math.round((elapsedSeconds / expectedTotal) * 100);
- } else {
- const x = (elapsedSeconds - expectedTotal * 0.85) / (activeStepTime * 2);
- const decay = 1 - Math.exp(-x);
- progressPercent = Math.min(99, Math.round(85 + 14 * decay));
- }
- }
- if (!hasRealGenerationStepRef.current) {
- setGenerationProgress((p) => Math.max(p, progressPercent));
- }
- }
- }, 1000);
-
- try {
- abortControllerRef.current = new AbortController();
- const result = await generateImage(
- prompt,
- negativePrompt,
- constraints,
- activeModel,
- baseImage,
- (prog) => setGenerationProgress((prev) => Math.max(prev, prog)),
- abortControllerRef.current.signal
- );
-
- if (timerRef.current) clearInterval(timerRef.current);
- setGenerationProgress(100);
- setCurrentStep(constraints.steps);
- setEstimatedLeftTime(0);
- setGenerationSpeed("");
-
- const metadata = {
- prompt: prompt,
- negativePrompt: negativePrompt,
- seed: result.seed,
- steps: constraints.steps,
- cfgScale: constraints.cfgScale,
- width: constraints.width,
- height: constraints.height,
- sampler: constraints.sampler,
- model: activeModel,
- mode: baseImage ? "img2img" : "txt2img",
- denoisingStrength: baseImage ? constraints.denoisingStrength : null,
- duration_sec: result.duration_sec,
- timestamp: new Date().toLocaleTimeString(),
- };
- let savedOutput = null;
- let savedUrl = null;
- try {
- savedOutput = await saveGeneratedOutput(result.image, metadata);
- savedUrl = savedOutput.url;
- if (!savedUrl) {
- throw new Error("The local server saved the image but did not return a file URL.");
- }
- } catch (saveErr) {
- console.error("Generated image could not be saved:", saveErr);
- throw new Error(`Image generated but could not be saved to USB: ${saveErr.message || saveErr}`);
- }
-
- setOutputImage(savedUrl);
- setOutputSeed(result.seed);
- setGenDuration(result.duration_sec);
-
- const historyItem = {
- ...metadata,
- ...(savedOutput || {}),
- url: savedUrl,
- };
-
- setGeneratedImages((prev) => [historyItem, ...prev]);
- } catch (e) {
- if (e.name === "AbortError") {
- console.log("Generation request was aborted by the user");
- } else {
- console.error("Generation failed:", e);
- setErrorMsg(e.message || "Generation failed. Please try again.");
- }
- if (timerRef.current) clearInterval(timerRef.current);
- } finally {
- setIsGenerating(false);
- abortControllerRef.current = null;
- }
- };
-
- // Stop/Cancel Generation Handler
- const handleCancelGeneration = async () => {
- if (await showConfirm({
- title: "Stop Generation?",
- message: "The current image generation will be cancelled and the local model server may restart.",
- confirmLabel: "Stop",
- danger: true,
- })) {
- if (timerRef.current) clearInterval(timerRef.current);
-
- // Set cancelling state first to keep the progress overlay active in cancelling mode
- setIsCancelling(true);
-
- if (abortControllerRef.current) {
- abortControllerRef.current.abort();
- }
-
- try {
- console.log("Cancelling: Stopping server to kill generation threads...");
- await stopServer();
- setCurrentStep(0);
- setGenerationSpeed("");
- setIsDecoding(false);
- hasRealGenerationStepRef.current = false;
-
- if (activeModel) {
- console.log("Cancelling: Restarting server for future generations...");
- await startServer(activeModel, constraints);
- const ready = await waitForServerReady();
- if (!ready) {
- console.warn("Server failed to restart properly.");
- }
- }
- } catch (err) {
- console.error("Failed to restart server on cancellation:", err);
- } finally {
- setIsCancelling(false);
- setIsGenerating(false);
- setGenerationProgress(0);
- setEstimatedLeftTime(0);
- }
- }
- };
-
- // Copy generated image to clipboard
- const handleCopyImage = async () => {
- if (!outputImage) return;
- try {
- if (outputImage.startsWith("data:image")) {
- // base64 conversion for clipboard
- const response = await fetch(outputImage);
- const blob = await response.blob();
- await navigator.clipboard.write([
- new ClipboardItem({ [blob.type]: blob })
- ]);
- } else {
- // Remote Unsplash images fallback (draw on canvas then copy)
- const img = new Image();
- img.crossOrigin = "anonymous";
- img.src = outputImage;
- img.onload = async () => {
- const canvas = document.createElement("canvas");
- canvas.width = img.width;
- canvas.height = img.height;
- const ctx = canvas.getContext("2d");
- ctx.drawImage(img, 0, 0);
- canvas.toBlob(async (blob) => {
- await navigator.clipboard.write([
- new ClipboardItem({ [blob.type]: blob })
- ]);
- }, "image/png");
- };
- }
- setCopySuccess(true);
- setTimeout(() => setCopySuccess(false), 2000);
- } catch (err) {
- console.error("Failed to copy image:", err);
- }
- };
-
- // Download generated image
- const handleDownload = () => {
- if (!outputImage) return;
- const link = document.createElement("a");
- link.href = outputImage;
- link.download = `diffusion-${outputSeed || Date.now()}.png`;
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
- };
-
- const downloadImageUrl = (url, filename = `diffusion-${Date.now()}.png`) => {
- if (!url) return;
- const link = document.createElement("a");
- link.href = url;
- link.download = filename;
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
- };
-
- // Reuse prompt settings from history
- const loadHistoryItem = useCallback((item) => {
- setPrompt(item.prompt);
- setNegativePrompt(item.negativePrompt);
- setConstraints((prev) => ({
- ...prev,
- steps: item.steps,
- cfgScale: item.cfgScale,
- width: item.width,
- height: item.height,
- sampler: item.sampler,
- seed: item.seed,
- }));
- setOutputImage(item.url);
- setOutputSeed(item.seed);
- setGenDuration(item.duration_sec ?? item.durationSec ?? null);
- }, [setPrompt, setNegativePrompt, setConstraints]);
-
- const toggleGallerySelection = useCallback((idx, event) => {
- const multi = event.ctrlKey || event.metaKey || event.shiftKey;
- setSelectedGalleryIndexes((prev) => {
- if (!multi) return [idx];
- return prev.includes(idx) ? prev.filter((item) => item !== idx) : [...prev, idx];
- });
- if (generatedImages[idx]) {
- loadHistoryItem(generatedImages[idx]);
- }
- }, [generatedImages, loadHistoryItem]);
-
- const selectedGalleryItems = selectedGalleryIndexes
- .map((idx) => generatedImages[idx])
- .filter(Boolean);
-
- const clearGallerySelection = () => {
- setSelectedGalleryIndexes([]);
- };
-
- const useSelectedGalleryItem = () => {
- if (selectedGalleryItems[0]) {
- loadHistoryItem(selectedGalleryItems[0]);
- }
- };
-
- const downloadSelectedGalleryItems = () => {
- selectedGalleryItems.forEach((item, index) => {
- const seed = item.seed ?? Date.now();
- downloadImageUrl(item.url, `diffusion-${seed}-${index + 1}.png`);
- });
- };
-
- const deleteSelectedGalleryItems = async () => {
- if (selectedGalleryItems.length === 0) return;
- const count = selectedGalleryItems.length;
- const confirmed = await showConfirm({
- title: "Delete Selected Outputs?",
- message: `Delete ${count} selected output${count === 1 ? "" : "s"} from USB? This removes the image and metadata files.`,
- confirmLabel: "Delete",
- danger: true,
- });
- if (!confirmed) return;
-
- try {
- await deleteGeneratedOutputs(selectedGalleryItems);
- const selectedSet = new Set(selectedGalleryIndexes);
- setGeneratedImages((prev) => prev.filter((_, idx) => !selectedSet.has(idx)));
- setSelectedGalleryIndexes([]);
-
- if (selectedGalleryItems.some((item) => item.url === outputImage)) {
- setOutputImage(null);
- setOutputSeed(null);
- setGenDuration(null);
- }
- } catch (err) {
- console.error("Failed to delete selected outputs:", err);
- showAlert({
- title: "Delete Failed",
- message: err.message || String(err),
- danger: true,
- });
- }
- };
-
- return (
-
-
- )}
-
-
-
-
- Generator Dashboard
-- Create high-fidelity images completely locally on your external drive. -
-
- {/* Left Side: Parameters & Input */}
-
-
-
-
-
-
-
-
-
- {/* Prompt Textarea */}
-
-
-