create-tauri-ui 0.3.2 → 1.0.0

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

@@ -1,82 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { useRouter } from "next/navigation"
-import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
-import { PopoverProps } from "@radix-ui/react-popover"
-
-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..."}
-          <CaretSortIcon 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}
-                <CheckIcon
-                  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("/examples")}>
-              More examples
-            </CommandItem>
-          </CommandGroup>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  )
-}

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

@@ -1,46 +0,0 @@
-import { CopyIcon } from "@radix-ui/react-icons"
-
-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>
-            <CopyIcon className="h-4 w-4" />
-          </Button>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}

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

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

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

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

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

@@ -1,313 +0,0 @@
-import { Metadata } from "next"
-import Image from "next/image"
-import { CounterClockwiseClockIcon } from "@radix-ui/react-icons"
-
-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 { 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"
-
-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>
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="none"
-                        className="h-5 w-5"
-                      >
-                        <rect
-                          x="4"
-                          y="3"
-                          width="12"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="4"
-                          y="7"
-                          width="12"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="4"
-                          y="11"
-                          width="3"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="4"
-                          y="15"
-                          width="3"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="8.5"
-                          y="11"
-                          width="3"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="8.5"
-                          y="15"
-                          width="3"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="13"
-                          y="11"
-                          width="3"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                      </svg>
-                    </TabsTrigger>
-                    <TabsTrigger value="insert">
-                      <span className="sr-only">Insert</span>
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="none"
-                        className="h-5 w-5"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          clipRule="evenodd"
-                          d="M14.491 7.769a.888.888 0 0 1 .287.648.888.888 0 0 1-.287.648l-3.916 3.667a1.013 1.013 0 0 1-.692.268c-.26 0-.509-.097-.692-.268L5.275 9.065A.886.886 0 0 1 5 8.42a.889.889 0 0 1 .287-.64c.181-.17.427-.267.683-.269.257-.002.504.09.69.258L8.903 9.87V3.917c0-.243.103-.477.287-.649.183-.171.432-.268.692-.268.26 0 .509.097.692.268a.888.888 0 0 1 .287.649V9.87l2.245-2.102c.183-.172.432-.269.692-.269.26 0 .508.097.692.269Z"
-                          fill="currentColor"
-                        ></path>
-                        <rect
-                          x="4"
-                          y="15"
-                          width="3"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="8.5"
-                          y="15"
-                          width="3"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="13"
-                          y="15"
-                          width="3"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                      </svg>
-                    </TabsTrigger>
-                    <TabsTrigger value="edit">
-                      <span className="sr-only">Edit</span>
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="none"
-                        className="h-5 w-5"
-                      >
-                        <rect
-                          x="4"
-                          y="3"
-                          width="12"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="4"
-                          y="7"
-                          width="12"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="4"
-                          y="11"
-                          width="3"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="4"
-                          y="15"
-                          width="4"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="8.5"
-                          y="11"
-                          width="3"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <path
-                          d="M17.154 11.346a1.182 1.182 0 0 0-1.671 0L11 15.829V17.5h1.671l4.483-4.483a1.182 1.182 0 0 0 0-1.671Z"
-                          fill="currentColor"
-                        ></path>
-                      </svg>
-                    </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>
-                        <CounterClockwiseClockIcon 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>
-                        <CounterClockwiseClockIcon 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>
-                        <CounterClockwiseClockIcon className="h-4 w-4" />
-                      </Button>
-                    </div>
-                  </div>
-                </TabsContent>
-              </div>
-            </div>
-          </div>
-        </Tabs>
-      </div>
-    </>
-  )
-}