Spaces:
Running
Running
File size: 3,315 Bytes
503a577 eb27538 503a577 eb27538 503a577 eb27538 503a577 eb27538 503a577 |
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 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
import React from 'react'
import AudioPlayer from './AudioPlayer'
import type { ExamplesData } from './Examples'
import { groupByNameAndVariant } from './galleryUtils'
import ExampleMetadata from './ExampleMetadata'
import ExampleDetailsSection from './ExampleDetailsSection'
import ExampleVariantSelector from './ExampleVariantSelector'
interface GalleryProps {
selectedModel: string
selectedAttack: string
examples: {
[model: string]: {
[attack: string]: ExamplesData[]
}
}
}
const AudioGallery: React.FC<GalleryProps> = ({ selectedModel, selectedAttack, examples }) => {
const exampleItems = examples[selectedModel][selectedAttack]
const grouped = groupByNameAndVariant(exampleItems)
console.log('Audio examples:', exampleItems)
console.log('Grouped audio examples:', grouped)
const audioNames = Object.keys(grouped)
const [selectedAudio, setSelectedAudio] = React.useState(audioNames[0] || '')
const variants = grouped[selectedAudio] || {}
const variantKeys = Object.keys(variants)
const [selectedVariant, setSelectedVariant] = React.useState(variantKeys[0] || '')
React.useEffect(() => {
setSelectedVariant(variantKeys[0] || '')
}, [selectedAudio])
if (!audioNames.length) {
return (
<div className="w-full mt-12 flex items-center justify-center">
<div className="text-gray-500">
No audio examples available. Please select another model and attack.
</div>
</div>
)
}
console.log(variants[selectedVariant])
return (
<div className="w-full overflow-auto" style={{ minHeight: '100vh' }}>
<div className="example-display">
<div className="mb-4">
<fieldset className="fieldset">
<legend className="fieldset-legend">Audio Example</legend>
<select
className="select select-bordered"
value={selectedAudio || ''}
onChange={(e) => {
setSelectedAudio(e.target.value || '')
}}
>
{audioNames.map((name) => (
<option key={name} value={name}>
{name}
</option>
))}
</select>
</fieldset>
</div>
{selectedAudio && selectedVariant && variants[selectedVariant] && (
<>
<ExampleVariantSelector
variantKeys={variantKeys}
selectedVariant={selectedVariant}
setSelectedVariant={setSelectedVariant}
/>
<ExampleMetadata metadata={variants[selectedVariant].metadata || {}} />
<ExampleDetailsSection>
<div className="flex flex-col items-center gap-4">
{variants[selectedVariant].image_url && (
<img
src={variants[selectedVariant].image_url}
alt={selectedAudio}
className="example-image"
style={{ display: 'block' }}
/>
)}
{variants[selectedVariant].audio_url && (
<AudioPlayer src={variants[selectedVariant].audio_url} />
)}
</div>
</ExampleDetailsSection>
</>
)}
</div>
</div>
)
}
export default AudioGallery
|