Spaces:
Running
Running
File size: 2,433 Bytes
e702d93 |
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 69 70 71 72 73 74 75 76 77 |
import React, { useState } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Slider } from '@/components/ui/slider';
const ModelComparisonInterface = () => {
const [temperature, setTemperature] = useState(0.7);
const [input, setInput] = useState('');
const [outputs, setOutputs] = useState({
model1: '',
model2: ''
});
return (
<div className="w-full max-w-4xl p-4">
<Card className="mb-4">
<CardHeader>
<CardTitle>Language Model Comparison</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium mb-2">
Input Text
</label>
<textarea
className="w-full h-32 p-2 border rounded"
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Enter your text here..."
/>
</div>
<div>
<label className="block text-sm font-medium mb-2">
Temperature: {temperature}
</label>
<Slider
value={[temperature]}
onValueChange={(value) => setTemperature(value[0])}
min={0}
max={1}
step={0.1}
className="w-full"
/>
</div>
<div className="grid grid-cols-2 gap-4">
<Card>
<CardHeader>
<CardTitle>Model 1 Output</CardTitle>
</CardHeader>
<CardContent>
<div className="min-h-32 p-2 border rounded bg-gray-50">
{outputs.model1 || 'Output will appear here...'}
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Model 2 Output</CardTitle>
</CardHeader>
<CardContent>
<div className="min-h-32 p-2 border rounded bg-gray-50">
{outputs.model2 || 'Output will appear here...'}
</div>
</CardContent>
</Card>
</div>
</div>
</CardContent>
</Card>
</div>
);
};
export default ModelComparisonInterface; |