Enhancing modelcode modal

src/components/ModelCode.tsx

@@ -1,8 +1,9 @@
-import { ExternalLink } from 'lucide-react'
+import { Copy, CopyCheck, ExternalLink, Link } from 'lucide-react'
 import Modal from './Modal'
 import MarkdownRenderer from './MarkdownRenderer'
 import { useModel } from '@/contexts/ModelContext'
-import { useTextGeneration } from '@/contexts/TextGenerationContext'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { useState } from 'react'
 
 interface ModelCodeProps {
   isCodeModalOpen: boolean
@@ -10,6 +11,7 @@ interface ModelCodeProps {
 }
 
 const ModelCode = ({ isCodeModalOpen, setIsCodeModalOpen }: ModelCodeProps) => {
+  const [isCopied, setIsCopied] = useState(false)
   const { modelInfo, pipeline, selectedQuantization } = useModel()
   if (!modelInfo) return null
 
@@ -31,6 +33,7 @@ const ModelCode = ({ isCodeModalOpen, setIsCodeModalOpen }: ModelCodeProps) => {
   let classType = 'classifier'
   let exampleData = 'I love this product!'
   let config = {}
+
   switch (pipeline) {
     case 'text-classification':
       classType = 'classifier'
@@ -58,7 +61,7 @@ const ModelCode = ({ isCodeModalOpen, setIsCodeModalOpen }: ModelCodeProps) => {
       break
     case 'feature-extraction':
       classType = 'generator'
-      exampleData = 'I love this product!'
+      exampleData = 'This is a simple test'
       config = {
         pooling: 'mean',
         normalize: true
@@ -73,7 +76,7 @@ const ModelCode = ({ isCodeModalOpen, setIsCodeModalOpen }: ModelCodeProps) => {
       break
   }
 
-  const code = `import { pipeline } from '@huggingface/transformers';
+  const jsCode = `import { pipeline } from '@huggingface/transformers';
 
 const ${classType} = pipeline('${pipeline}', '${modelInfo.name}', {
   dtype: '${selectedQuantization}',
@@ -83,7 +86,30 @@ const result = await ${classType}('${exampleData}', ${JSON.stringify(config, nul
 console.log(result);
 `
 
-  console.log(modelInfo.widgetData)
+  const configPython = Object.entries(config)
+    .map(
+      ([key, value]) =>
+        `${key}=${value === true ? 'True' : typeof value === 'string' ? "'" + value + "'" : value}`
+    )
+    .join(', ')
+
+  const pythonCode = `from transformers import pipeline
+
+${classType} = pipeline("${pipeline}", model="${modelInfo.name}")
+result = ${classType}("${exampleData}", ${configPython})
+print(result)
+`
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text)
+    setIsCopied(true)
+    setTimeout(() => setIsCopied(false), 2000)
+  }
+
+  const pipelineName = pipeline
+    .split('-')
+    .map((word, index) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('')
 
   return (
     <>
@@ -94,19 +120,68 @@ console.log(result);
         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 className="flex flex-row">
+            <img src="/javascript-logo.svg" className="w-6 h-6 mr-1 rounded" />
+            <h2 className="text-lg font-medium mb-2">Javascript</h2>
+          </div>
+          <div className="flex flex-row items-center text-sm hover:underline text-foreground/60">
+            <Link className="h-3 w-3 mr-2" />
+            <a
+              href={`https://huggingface.co/docs/transformers.js/api/pipelines#pipelines${pipeline.replace(/-/g, '')}pipeline`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Read about {pipeline} Pipeline Documentation for Javascript
+            </a>
+          </div>
+          <div className="relative">
+            <div className="absolute right-0 top-0 mt-2 mr-2">
+              <button
+                onClick={() => copyToClipboard(jsCode)}
+                className="text-gray-500 hover:text-gray-700 p-1 text-xs"
+              >
+                <Copy className="w-4 h-4" />
+              </button>
+            </div>
+            <MarkdownRenderer content={`\`\`\`javascript\n${jsCode}\n\`\`\``} />
+          </div>
+
+          <div className="mt-6">
+            <div className="flex flex-row">
+              <img src="/python-logo.svg" className="w-6 h-6 mr-1" />
+              <h2 className="text-lg font-medium mb-2">Python</h2>
+            </div>
+            <a
+              className="text-sm hover:underline text-foreground/60"
+              href={`https://huggingface.co/docs/transformers/en/main_classes/pipelines#transformers.${pipelineName}Pipeline`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Read about {pipeline} Pipeline Documentation for Python
+            </a>
+            <div className="relative">
+              <div className="absolute right-0 top-0 mt-2 mr-2">
+                <button
+                  onClick={() => copyToClipboard(pythonCode)}
+                  className="text-gray-500 hover:text-gray-700 p-1 text-xs"
+                >
+                  <Copy className="w-4 h-4" />
+                </button>
+              </div>
+              <MarkdownRenderer
+                content={`\`\`\`python\n${pythonCode}\n\`\`\``}
+              />
+            </div>
+          </div>
         </div>
+        {isCopied && (
+          <div className="absolute top-2 left-1/2 transform -translate-x-1/2">
+            <Alert>
+              <CopyCheck className="w-4 h-4 opacity-60" />
+              <AlertDescription>Copied!</AlertDescription>
+            </Alert>
+          </div>
+        )}
       </Modal>
     </>
   )

src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-card-foreground',
+        destructive:
+          'text-destructive bg-background [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90'
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

src/index.css

@@ -87,7 +87,7 @@ code {
   --radius: 0.625rem;
   --background: oklch(0.98 0.01 220);
   --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
+  --card: oklch(0.7 0.12 260);
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
@@ -125,7 +125,7 @@ code {
 .dark {
   --background: oklch(0.12 0.02 260);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.18 0.03 260);
+  --card: oklch(0.7 0.12 260);
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.18 0.03 260);
   --popover-foreground: oklch(0.985 0 0);