Spaces:
Running
Running
File size: 2,462 Bytes
1fc0d15 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | typescript
import { usePromptStore } from '../core/models/store';
import { Select } from './ui/Select';
import { Button } from './ui/Button';
import { KI_MODELS, OPTIMIZATION_FRAMEWORKS } from '../core/models/optimizationConfig';
import { generateOptimizedPrompt } from '../core/engine/optimizer';
import { Sparkles } from 'lucide-react';
export const OptimizationControls = () => {
const { targetKI, framework, mode, originalPrompt, isProcessing, setTargetKI, setFramework, setMode, setOptimizedPrompt, setIsProcessing } = usePromptStore();
const selectedFramework = OPTIMIZATION_FRAMEWORKS.find(f => f.name === framework);
const availableModes = selectedFramework?.modes || [];
const handleOptimize = () => {
setIsProcessing(true);
// Simulate API call delay
setTimeout(() => {
setOptimizedPrompt(generateOptimizedPrompt(originalPrompt, targetKI, framework, mode));
setIsProcessing(false);
}, 500);
};
return (
<div className="flex flex-col gap-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
<Select
label="Ziel-KI"
value={targetKI}
onChange={(e) => setTargetKI(e.target.value as any)}
>
{KI_MODELS.map(ki => (
<option key={ki} value={ki}>{ki}</option>
))}
</Select>
<Select
label="Framework"
value={framework}
onChange={(e) => setFramework(e.target.value as any)}
>
{OPTIMIZATION_FRAMEWORKS.map(fw => (
<option key={fw.name} value={fw.name}>{fw.name}</option>
))}
</Select>
<Select
label="Modus"
value={mode}
onChange={(e) => setMode(e.target.value as any)}
>
{availableModes.map(m => (
<option key={m} value={m}>{m}</option>
))}
</Select>
<Button
onClick={handleOptimize}
disabled={!originalPrompt.trim() || isProcessing}
className="w-full"
>
<Sparkles className="w-4 h-4 mr-2" />
{isProcessing ? 'Optimiere...' : 'Prompt Optimieren'}
</Button>
</div>
);
};
</html> |