add modal to see code

src/App.tsx

@@ -12,10 +12,12 @@ import Sidebar from './components/Sidebar'
 import ModelReadme from './components/ModelReadme'
 import { PipelineLayout } from './components/PipelineLayout'
 import Footer from './Footer'
+import ModelCode from './components/ModelCode'
 
 function App() {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false)
   const [isModalOpen, setIsModalOpen] = useState(false)
+  const [isCodeModalOpen, setIsCodeModalOpen] = useState(false)
   const { pipeline, setModels, setModelInfo, modelInfo, setIsFetching } =
     useModel()
 
@@ -74,6 +76,11 @@ function App() {
             isOpen={isSidebarOpen}
             onClose={() => setIsSidebarOpen(false)}
             setIsModalOpen={setIsModalOpen}
+            setIsCodeModalOpen={setIsCodeModalOpen}
+          />
+          <ModelCode
+            isCodeModalOpen={isCodeModalOpen}
+            setIsCodeModalOpen={setIsCodeModalOpen}
           />
         </div>
       </PipelineLayout>

src/components/ModelCode.tsx

@@ -0,0 +1,115 @@
+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

src/components/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { FileText, X } from 'lucide-react'
+import { Code2, FileText, X } from 'lucide-react'
 import PipelineSelector from './PipelineSelector'
 import ModelSelector from './ModelSelector'
 import ModelInfo from './ModelInfo'
@@ -7,14 +7,21 @@ import TextGenerationConfig from './pipelines/TextGenerationConfig'
 import FeatureExtractionConfig from './pipelines/FeatureExtractionConfig'
 import ZeroShotClassificationConfig from './pipelines/ZeroShotClassificationConfig'
 import ImageClassificationConfig from './pipelines/ImageClassificationConfig'
+import { Button } from '@/components/ui/button'
 
 interface SidebarProps {
   isOpen: boolean
   onClose: () => void
   setIsModalOpen: (isOpen: boolean) => void
+  setIsCodeModalOpen: (isOpen: boolean) => void
 }
 
-const Sidebar = ({ isOpen, onClose, setIsModalOpen }: SidebarProps) => {
+const Sidebar = ({
+  isOpen,
+  onClose,
+  setIsModalOpen,
+  setIsCodeModalOpen
+}: SidebarProps) => {
   const { pipeline, setPipeline } = useModel()
 
   return (
@@ -71,14 +78,18 @@ const Sidebar = ({ isOpen, onClose, setIsModalOpen }: SidebarProps) => {
             <div className="flex flex-col items-center justify-center">
               <ModelInfo />
               {/* Model README Button */}
-              <div className="mt-4 w-full max-w-44 mx-auto">
-                <button
-                  onClick={() => setIsModalOpen(true)}
-                  className="flex items-center w-full px-3 py-2 text-sm text-gray-600 bg-gray-50 rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors"
+              <div className="flex flex-row mt-2 space-x-4 ">
+                <Button variant="outline" onClick={() => setIsModalOpen(true)}>
+                  <FileText className="w-4 h-4 flex-shrink-0" />
+                  <span>View README.md</span>
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => setIsCodeModalOpen(true)}
                 >
-                  <FileText className="w-4 h-4 mr-2 flex-shrink-0" />
-                  <span className="truncate">View README.md</span>
-                </button>
+                  <Code2 className="w-4 h-4 flex-shrink-0" />
+                  <span>See Code</span>
+                </Button>
               </div>
             </div>