create-tauri-ui 0.1.0

package/templates/next/src/app/examples/playground/components/preset-selector.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import { PopoverProps } from "@radix-ui/react-popover"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+import { Preset } from "../data/presets"
+
+interface PresetSelectorProps extends PopoverProps {
+  presets: Preset[]
+}
+
+export function PresetSelector({ presets, ...props }: PresetSelectorProps) {
+  const [open, setOpen] = React.useState(false)
+  const [selectedPreset, setSelectedPreset] = React.useState<Preset>()
+  const router = useRouter()
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} {...props}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-label="Load a preset..."
+          aria-expanded={open}
+          className="flex-1 justify-between md:max-w-[200px] lg:max-w-[300px]"
+        >
+          {selectedPreset ? selectedPreset.name : "Load a preset..."}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[300px] p-0">
+        <Command>
+          <CommandInput placeholder="Search presets..." />
+          <CommandEmpty>No presets found.</CommandEmpty>
+          <CommandGroup heading="Examples">
+            {presets.map((preset) => (
+              <CommandItem
+                key={preset.id}
+                onSelect={() => {
+                  setSelectedPreset(preset)
+                  setOpen(false)
+                }}
+              >
+                {preset.name}
+                <Check
+                  className={cn(
+                    "ml-auto h-4 w-4",
+                    selectedPreset?.id === preset.id
+                      ? "opacity-100"
+                      : "opacity-0"
+                  )}
+                />
+              </CommandItem>
+            ))}
+          </CommandGroup>
+          <CommandGroup className="pt-0">
+            <CommandItem onSelect={() => router.push("/")}>
+              More examples
+            </CommandItem>
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/templates/next/src/app/examples/playground/components/preset-share.tsx

@@ -0,0 +1,46 @@
+import { Copy } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+export function PresetShare() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="secondary">Share</Button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-[520px]">
+        <div className="flex flex-col space-y-2 text-center sm:text-left">
+          <h3 className="text-lg font-semibold">Share preset</h3>
+          <p className="text-sm text-muted-foreground">
+            Anyone who has this link and an OpenAI account will be able to view
+            this.
+          </p>
+        </div>
+        <div className="flex items-center space-x-2 pt-4">
+          <div className="grid flex-1 gap-2">
+            <Label htmlFor="link" className="sr-only">
+              Link
+            </Label>
+            <Input
+              id="link"
+              defaultValue="https://platform.openai.com/playground/p/7bbKYQvsVkNmVb8NGcdUOLae?model=text-davinci-003"
+              readOnly
+              className="h-9"
+            />
+          </div>
+          <Button type="submit" size="sm" className="px-3">
+            <span className="sr-only">Copy</span>
+            <Copy className="h-4 w-4" />
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/templates/next/src/app/examples/playground/components/temperature-selector.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { SliderProps } from "@radix-ui/react-slider"
+
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card"
+import { Label } from "@/components/ui/label"
+import { Slider } from "@/components/ui/slider"
+
+interface TemperatureSelectorProps {
+  defaultValue: SliderProps["defaultValue"]
+}
+
+export function TemperatureSelector({
+  defaultValue,
+}: TemperatureSelectorProps) {
+  const [value, setValue] = React.useState(defaultValue)
+
+  return (
+    <div className="grid gap-2 pt-2">
+      <HoverCard openDelay={200}>
+        <HoverCardTrigger asChild>
+          <div className="grid gap-4">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="temperature">Temperature</Label>
+              <span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
+                {value}
+              </span>
+            </div>
+            <Slider
+              id="temperature"
+              max={1}
+              defaultValue={value}
+              step={0.1}
+              onValueChange={setValue}
+              className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+              aria-label="Temperature"
+            />
+          </div>
+        </HoverCardTrigger>
+        <HoverCardContent
+          align="start"
+          className="w-[260px] text-sm"
+          side="left"
+        >
+          Controls randomness: lowering results in less random completions. As
+          the temperature approaches zero, the model will become deterministic
+          and repetitive.
+        </HoverCardContent>
+      </HoverCard>
+    </div>
+  )
+}

package/templates/next/src/app/examples/playground/components/top-p-selector.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+import { SliderProps } from "@radix-ui/react-slider"
+
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card"
+import { Label } from "@/components/ui/label"
+import { Slider } from "@/components/ui/slider"
+
+interface TopPSelectorProps {
+  defaultValue: SliderProps["defaultValue"]
+}
+
+export function TopPSelector({ defaultValue }: TopPSelectorProps) {
+  const [value, setValue] = React.useState(defaultValue)
+
+  return (
+    <div className="grid gap-2 pt-2">
+      <HoverCard openDelay={200}>
+        <HoverCardTrigger asChild>
+          <div className="grid gap-4">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="top-p">Top P</Label>
+              <span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
+                {value}
+              </span>
+            </div>
+            <Slider
+              id="top-p"
+              max={1}
+              defaultValue={value}
+              step={0.1}
+              onValueChange={setValue}
+              className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+              aria-label="Top P"
+            />
+          </div>
+        </HoverCardTrigger>
+        <HoverCardContent
+          align="start"
+          className="w-[260px] text-sm"
+          side="left"
+        >
+          Control diversity via nucleus sampling: 0.5 means half of all
+          likelihood-weighted options are considered.
+        </HoverCardContent>
+      </HoverCard>
+    </div>
+  )
+}

package/templates/next/src/app/examples/playground/data/models.ts

@@ -0,0 +1,62 @@
+export const types = ["GPT-3", "Codex"] as const
+
+export type ModelType = (typeof types)[number]
+
+export interface Model<Type = string> {
+  id: string
+  name: string
+  description: string
+  strengths?: string
+  type: Type
+}
+
+export const models: Model<ModelType>[] = [
+  {
+    id: "c305f976-8e38-42b1-9fb7-d21b2e34f0da",
+    name: "text-davinci-003",
+    description:
+      "Most capable GPT-3 model. Can do any task the other models can do, often with higher quality, longer output and better instruction-following. Also supports inserting completions within text.",
+    type: "GPT-3",
+    strengths:
+      "Complex intent, cause and effect, creative generation, search, summarization for audience",
+  },
+  {
+    id: "464a47c3-7ab5-44d7-b669-f9cb5a9e8465",
+    name: "text-curie-001",
+    description: "Very capable, but faster and lower cost than Davinci.",
+    type: "GPT-3",
+    strengths:
+      "Language translation, complex classification, sentiment, summarization",
+  },
+  {
+    id: "ac0797b0-7e31-43b6-a494-da7e2ab43445",
+    name: "text-babbage-001",
+    description: "Capable of straightforward tasks, very fast, and lower cost.",
+    type: "GPT-3",
+    strengths: "Moderate classification, semantic search",
+  },
+  {
+    id: " be638fb1-973b-4471-a49c-290325085802",
+    name: "text-ada-001",
+    description:
+      "Capable of very simple tasks, usually the fastest model in the GPT-3 series, and lowest cost.",
+    type: "GPT-3",
+    strengths:
+      "Parsing text, simple classification, address correction, keywords",
+  },
+  {
+    id: "b43c0ea9-5ad4-456a-ae29-26cd77b6d0fb",
+    name: "code-davinci-002",
+    description:
+      "Most capable Codex model. Particularly good at translating natural language to code. In addition to completing code, also supports inserting completions within code.",
+    type: "Codex",
+  },
+  {
+    id: "bbd57291-4622-4a21-9eed-dd6bd786fdd1",
+    name: "code-cushman-001",
+    description:
+      "Almost as capable as Davinci Codex, but slightly faster. This speed advantage may make it preferable for real-time applications.",
+    type: "Codex",
+    strengths: "Real-time application where low-latency is preferable",
+  },
+]

package/templates/next/src/app/examples/playground/data/presets.ts

@@ -0,0 +1,47 @@
+export interface Preset {
+  id: string
+  name: string
+}
+
+export const presets: Preset[] = [
+  {
+    id: "9cb0e66a-9937-465d-a188-2c4c4ae2401f",
+    name: "Grammatical Standard English",
+  },
+  {
+    id: "61eb0e32-2391-4cd3-adc3-66efe09bc0b7",
+    name: "Summarize for a 2nd grader",
+  },
+  {
+    id: "a4e1fa51-f4ce-4e45-892c-224030a00bdd",
+    name: "Text to command",
+  },
+  {
+    id: "cc198b13-4933-43aa-977e-dcd95fa30770",
+    name: "Q&A",
+  },
+  {
+    id: "adfa95be-a575-45fd-a9ef-ea45386c64de",
+    name: "English to other languages",
+  },
+  {
+    id: "c569a06a-0bd6-43a7-adf9-bf68c09e7a79",
+    name: "Parse unstructured data",
+  },
+  {
+    id: "15ccc0d7-f37a-4f0a-8163-a37e162877dc",
+    name: "Classification",
+  },
+  {
+    id: "4641ef41-1c0f-421d-b4b2-70fe431081f3",
+    name: "Natural language to Python",
+  },
+  {
+    id: "48d34082-72f3-4a1b-a14d-f15aca4f57a0",
+    name: "Explain code",
+  },
+  {
+    id: "dfd42fd5-0394-4810-92c6-cc907d3bfd1a",
+    name: "Chat",
+  },
+]

package/templates/next/src/app/examples/playground/page.tsx

@@ -0,0 +1,160 @@
+import { Metadata } from "next"
+import { History } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Textarea } from "@/components/ui/textarea"
+
+import { CodeViewer } from "./components/code-viewer"
+import { Icons } from "./components/icons"
+import { MaxLengthSelector } from "./components/maxlength-selector"
+import { ModelSelector } from "./components/model-selector"
+import { PresetActions } from "./components/preset-actions"
+import { PresetSave } from "./components/preset-save"
+import { PresetSelector } from "./components/preset-selector"
+import { PresetShare } from "./components/preset-share"
+import { TemperatureSelector } from "./components/temperature-selector"
+import { TopPSelector } from "./components/top-p-selector"
+import { models, types } from "./data/models"
+import { presets } from "./data/presets"
+import "./styles.css"
+import Image from "next/image"
+
+export const metadata: Metadata = {
+  title: "Playground",
+  description: "The OpenAI Playground built using the components.",
+}
+
+export default function PlaygroundPage() {
+  return (
+    <div className="h-full flex-col md:flex">
+      <div className="container flex flex-col items-start justify-between space-y-2 py-4 sm:flex-row sm:items-center sm:space-y-0 md:h-16">
+        <h2 className="text-lg font-semibold">Playground</h2>
+        <div className="ml-auto flex w-full space-x-2 sm:justify-end">
+          <PresetSelector presets={presets} />
+          <PresetSave />
+          <div className="hidden space-x-2 md:flex">
+            <CodeViewer />
+            <PresetShare />
+          </div>
+          <PresetActions />
+        </div>
+      </div>
+      <Separator />
+      <Tabs defaultValue="complete" className="flex-1">
+        <div className="container h-full py-6">
+          <div className="grid h-full items-stretch gap-6 md:grid-cols-[1fr_200px]">
+            <div className="hidden flex-col space-y-4 sm:flex md:order-2">
+              <div className="grid gap-2">
+                <HoverCard openDelay={200}>
+                  <HoverCardTrigger asChild>
+                    <span className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                      Mode
+                    </span>
+                  </HoverCardTrigger>
+                  <HoverCardContent className="w-[320px] text-sm" side="left">
+                    Choose the interface that best suits your task. You can
+                    provide: a simple prompt to complete, starting and ending
+                    text to insert a completion within, or some text with
+                    instructions to edit it.
+                  </HoverCardContent>
+                </HoverCard>
+                <TabsList className="grid grid-cols-3">
+                  <TabsTrigger value="complete">
+                    <span className="sr-only">Complete</span>
+                    <Icons.completeMode className="h-5 w-5" />
+                  </TabsTrigger>
+                  <TabsTrigger value="insert">
+                    <span className="sr-only">Insert</span>
+                    <Icons.insertMode className="h-5 w-5" />
+                  </TabsTrigger>
+                  <TabsTrigger value="edit">
+                    <span className="sr-only">Edit</span>
+                    <Icons.editMode className="h-5 w-5" />
+                  </TabsTrigger>
+                </TabsList>
+              </div>
+              <ModelSelector types={types} models={models} />
+              <TemperatureSelector defaultValue={[0.56]} />
+              <MaxLengthSelector defaultValue={[256]} />
+              <TopPSelector defaultValue={[0.9]} />
+            </div>
+            <div className="md:order-1">
+              <TabsContent value="complete" className="mt-0 border-0 p-0">
+                <div className="flex h-full flex-col space-y-4">
+                  <Textarea
+                    placeholder="Write a tagline for an ice cream shop"
+                    className="min-h-[400px] flex-1 p-4 md:min-h-[700px] lg:min-h-[700px]"
+                  />
+                  <div className="flex items-center space-x-2">
+                    <Button>Submit</Button>
+                    <Button variant="secondary">
+                      <span className="sr-only">Show history</span>
+                      <History className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              </TabsContent>
+              <TabsContent value="insert" className="mt-0 border-0 p-0">
+                <div className="flex flex-col space-y-4">
+                  <div className="grid h-full grid-rows-2 gap-6 lg:grid-cols-2 lg:grid-rows-1">
+                    <Textarea
+                      placeholder="We're writing to [inset]. Congrats from OpenAI!"
+                      className="h-full min-h-[300px] lg:min-h-[700px] xl:min-h-[700px]"
+                    />
+                    <div className="rounded-md border bg-muted"></div>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Button>Submit</Button>
+                    <Button variant="secondary">
+                      <span className="sr-only">Show history</span>
+                      <History className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              </TabsContent>
+              <TabsContent value="edit" className="mt-0 border-0 p-0">
+                <div className="flex flex-col space-y-4">
+                  <div className="grid h-full gap-6 lg:grid-cols-2">
+                    <div className="flex flex-col space-y-4">
+                      <div className="flex flex-1 flex-col space-y-2">
+                        <Label htmlFor="input">Input</Label>
+                        <Textarea
+                          id="input"
+                          placeholder="We is going to the market."
+                          className="flex-1 lg:min-h-[580px]"
+                        />
+                      </div>
+                      <div className="flex flex-col space-y-2">
+                        <Label htmlFor="instructions">Instructions</Label>
+                        <Textarea
+                          id="instructions"
+                          placeholder="Fix the grammar."
+                        />
+                      </div>
+                    </div>
+                    <div className="mt-[21px] min-h-[400px] rounded-md border bg-muted lg:min-h-[700px]" />
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Button>Submit</Button>
+                    <Button variant="secondary">
+                      <span className="sr-only">Show history</span>
+                      <History className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              </TabsContent>
+            </div>
+          </div>
+        </div>
+      </Tabs>
+    </div>
+  )
+}

package/templates/next/src/app/examples/playground/styles.css

@@ -0,0 +1,65 @@
+[data-section="playground"] {
+  --background: 0 0% 100%;
+  --foreground: 222.2 47.4% 11.2%;
+
+  --muted: 154 79% 96%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 47.4% 11.2%;
+
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 47.4% 11.2%;
+
+  --primary: 143 72% 29%;
+  --primary-foreground: 141 75% 97%;
+
+  --secondary: 145 80% 10%;
+  --secondary-foreground: 141 75% 97%;
+
+  --accent: 154 79% 96%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+
+  --destructive: 0 100% 50%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 158 64% 52%;
+
+  --radius: 0rem;
+}
+
+.dark [data-section="playground"] {
+  --background: 224 71% 4%;
+  --foreground: 213 31% 91%;
+
+  --muted: 223 47% 11%;
+  --muted-foreground: 215.4 16.3% 56.9%;
+
+  --popover: 224 71% 4%;
+  --popover-foreground: 215 20.2% 65.1%;
+
+  --border: 216 34% 17%;
+  --input: 216 34% 17%;
+
+  --card: 224 71% 4%;
+  --card-foreground: 213 31% 91%;
+
+  --primary: 143 72% 29%;
+  --primary-foreground: 141 75% 97%;
+
+  --secondary: 145 80% 10%;
+  --secondary-foreground: 141 75% 97%;
+
+  --accent: 154 79% 96%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+
+  --destructive: 0 100% 50%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 158 64% 52%;
+
+  --radius: 0rem;
+}