File size: 3,048 Bytes
bd85b1e |
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 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
import { ExternalLink } from 'lucide-react'
import Modal from './Modal'
import MarkdownRenderer from './MarkdownRenderer'
import { useModel } from '@/contexts/ModelContext'
import { useTextGeneration } from '@/contexts/TextGenerationContext'
interface ModelCodeProps {
isCodeModalOpen: boolean
setIsCodeModalOpen: (isOpen: boolean) => void
}
const ModelCode = ({ isCodeModalOpen, setIsCodeModalOpen }: ModelCodeProps) => {
const { modelInfo, pipeline, selectedQuantization } = useModel()
if (!modelInfo) return null
const title = (
<div className="flex items-center space-x-2">
<a
className="truncate hover:underline"
href={`https://huggingface.co/${modelInfo.name}`}
target="_blank"
rel="noopener noreferrer"
>
<ExternalLink className="w-3 h-3 inline-block mr-1" />
{modelInfo.name}
</a>
</div>
)
let classType = 'classifier'
let exampleData = 'I love this product!'
let config = {}
switch (pipeline) {
case 'text-classification':
classType = 'classifier'
exampleData = 'I love this product!'
config = {}
break
case 'text-generation':
classType = 'generator'
exampleData = 'I love this product!'
config = {
max_length: 50,
do_sample: true,
temperature: 0.7,
top_p: 0.9,
top_k: 50
}
break
case 'zero-shot-classification':
classType = 'classifier'
exampleData = "I love this product!, ['positive', 'neutral', 'negative']"
config = {
threshold: 0.5
}
break
case 'feature-extraction':
classType = 'generator'
exampleData = 'I love this product!'
config = {
pooling: 'mean',
normalize: true
}
break
case 'image-classification':
classType = 'classifier'
exampleData = 'https://example.com/image.jpg'
config = {
top_k: 5
}
break
}
const code = `import { pipeline } from '@huggingface/transformers';
const ${classType} = pipeline('${pipeline}', '${modelInfo.name}', {
dtype: '${selectedQuantization}',
device: 'webgpu' // 'wasm'
});
const result = await ${classType}('${exampleData}', ${JSON.stringify(config, null, 2)});
console.log(result);
`
console.log(modelInfo.widgetData)
return (
<>
<Modal
isOpen={isCodeModalOpen}
onClose={() => setIsCodeModalOpen(false)}
title={title}
maxWidth="5xl"
>
<div className="text-sm max-w-none px-4">
<MarkdownRenderer content={`\`\`\`typescript\n${code}\n\`\`\``} />
</div>
{/* More information link */}
<div className="mt-4">
<a
className="text-blue-500 hover:underline"
href={`https://huggingface.co/${modelInfo.name}`}
target="_blank"
rel="noopener noreferrer"
>
Learn more about this model on Hugging Face
</a>
</div>
</Modal>
</>
)
}
export default ModelCode
|