feat: add playground examples
This commit is contained in:
zernonia
parent
6d86b25ff0
commit
a8ebf5ea73
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import Cards from "@/examples/cards/Example.vue"
|
import CardsExample from "@/examples/cards/Example.vue"
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Cards />
|
<CardsExample />
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import Dashboard from "@/examples/dashboard/Example.vue"
|
import DashboardExample from "@/examples/dashboard/Example.vue"
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Dashboard />
|
<DashboardExample />
|
||||||
5
apps/www/src/content/examples/playground.md
Normal file
5
apps/www/src/content/examples/playground.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
<script setup>
|
||||||
|
import PlaygroundExample from "@/examples/playground/Example.vue"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<PlaygroundExample />
|
||||||
319
apps/www/src/examples/playground/Example.vue
Normal file
319
apps/www/src/examples/playground/Example.vue
Normal file
|
|
@ -0,0 +1,319 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import CodeViewer from './components/CodeViewer.vue'
|
||||||
|
import MaxLengthSelector from './components/MaxLengthSelector.vue'
|
||||||
|
import ModelSelector from './components/ModelSelector.vue'
|
||||||
|
import PresetActions from './components/PresetActions.vue'
|
||||||
|
import PresetSave from './components/PresetSave.vue'
|
||||||
|
import PresetSelector from './components/PresetSelector.vue'
|
||||||
|
import PresetShare from './components/PresetShare.vue'
|
||||||
|
import TemperatureSelector from './components/TemperatureSelector.vue'
|
||||||
|
import TopPSelector from './components/TopPSelector.vue'
|
||||||
|
|
||||||
|
import { Textarea } from '@/lib/registry/default/ui/textarea'
|
||||||
|
import {
|
||||||
|
Tabs,
|
||||||
|
TabsContent,
|
||||||
|
TabsList,
|
||||||
|
TabsTrigger,
|
||||||
|
} from '@/lib/registry/default/ui/tabs'
|
||||||
|
import { Separator } from '@/lib/registry/default/ui/separator'
|
||||||
|
import { Label } from '@/lib/registry/default/ui/label'
|
||||||
|
import { Button } from '@/lib/registry/default/ui/button'
|
||||||
|
import {
|
||||||
|
HoverCard,
|
||||||
|
HoverCardContent,
|
||||||
|
HoverCardTrigger,
|
||||||
|
} from '@/lib/registry/default/ui/hover-card'
|
||||||
|
import CounterClockwiseClockIcon from '~icons/radix-icons/counter-clockwise-clock'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="md:hidden">
|
||||||
|
<Image
|
||||||
|
src="/examples/playground-light.png"
|
||||||
|
width="{1280}"
|
||||||
|
height="{916}"
|
||||||
|
alt="Playground"
|
||||||
|
class="block dark:hidden"
|
||||||
|
/>
|
||||||
|
<Image
|
||||||
|
src="/examples/playground-dark.png"
|
||||||
|
width="{1280}"
|
||||||
|
height="{916}"
|
||||||
|
alt="Playground"
|
||||||
|
class="hidden dark:block"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="hidden h-full flex-col md:flex">
|
||||||
|
<div class="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 class="text-lg font-semibold">
|
||||||
|
Playground
|
||||||
|
</h2>
|
||||||
|
<div class="ml-auto flex w-full space-x-2 sm:justify-end">
|
||||||
|
<PresetSelector presets="{presets}" />
|
||||||
|
<PresetSave />
|
||||||
|
<div class="hidden space-x-2 md:flex">
|
||||||
|
<CodeViewer />
|
||||||
|
<PresetShare />
|
||||||
|
</div>
|
||||||
|
<PresetActions />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<Tabs default-value="complete" class="flex-1">
|
||||||
|
<div class="container h-full py-6">
|
||||||
|
<div class="grid h-full items-stretch gap-6 md:grid-cols-[1fr_200px]">
|
||||||
|
<div class="hidden flex-col space-y-4 sm:flex md:order-2">
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<HoverCard :open-delay="200">
|
||||||
|
<HoverCardTrigger as-child>
|
||||||
|
<span class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
|
||||||
|
Mode
|
||||||
|
</span>
|
||||||
|
</HoverCardTrigger>
|
||||||
|
<HoverCardContent class="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 class="grid grid-cols-3">
|
||||||
|
<TabsTrigger value="complete">
|
||||||
|
<span class="sr-only">Complete</span>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="none"
|
||||||
|
class="h-5 w-5"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
x="4"
|
||||||
|
y="3"
|
||||||
|
width="12"
|
||||||
|
height="2"
|
||||||
|
rx="1"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="4"
|
||||||
|
y="7"
|
||||||
|
width="12"
|
||||||
|
height="2"
|
||||||
|
rx="1"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="4"
|
||||||
|
y="11"
|
||||||
|
width="3"
|
||||||
|
height="2"
|
||||||
|
rx="1"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="4"
|
||||||
|
y="15"
|
||||||
|
width="3"
|
||||||
|
height="2"
|
||||||
|
rx="1"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="8.5"
|
||||||
|
y="11"
|
||||||
|
width="3"
|
||||||
|
height="2"
|
||||||
|
rx="1"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="8.5"
|
||||||
|
y="15"
|
||||||
|
width="3"
|
||||||
|
height="2"
|
||||||
|
rx="1"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="13"
|
||||||
|
y="11"
|
||||||
|
width="3"
|
||||||
|
height="2"
|
||||||
|
rx="1"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger value="insert">
|
||||||
|
<span class="sr-only">Insert</span>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="none"
|
||||||
|
class="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"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="4"
|
||||||
|
y="15"
|
||||||
|
width="3"
|
||||||
|
height="2"
|
||||||
|
rx="1"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="8.5"
|
||||||
|
y="15"
|
||||||
|
width="3"
|
||||||
|
height="2"
|
||||||
|
rx="1"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="13"
|
||||||
|
y="15"
|
||||||
|
width="3"
|
||||||
|
height="2"
|
||||||
|
rx="1"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger value="edit">
|
||||||
|
<span class="sr-only">Edit</span>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="none"
|
||||||
|
class="h-5 w-5"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
x="4"
|
||||||
|
y="3"
|
||||||
|
width="12"
|
||||||
|
height="2"
|
||||||
|
rx="1"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="4"
|
||||||
|
y="7"
|
||||||
|
width="12"
|
||||||
|
height="2"
|
||||||
|
rx="1"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="4"
|
||||||
|
y="11"
|
||||||
|
width="3"
|
||||||
|
height="2"
|
||||||
|
rx="1"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="4"
|
||||||
|
y="15"
|
||||||
|
width="4"
|
||||||
|
height="2"
|
||||||
|
rx="1"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="8.5"
|
||||||
|
y="11"
|
||||||
|
width="3"
|
||||||
|
height="2"
|
||||||
|
rx="1"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
</div>
|
||||||
|
<ModelSelector :types="types" :models="models" />
|
||||||
|
<TemperatureSelector :default-value="[0.56]" />
|
||||||
|
<MaxLengthSelector :default-value="[256]" />
|
||||||
|
<TopPSelector :default-value="[0.9]" />
|
||||||
|
</div>
|
||||||
|
<div class="md:order-1">
|
||||||
|
<TabsContent value="complete" class="mt-0 border-0 p-0">
|
||||||
|
<div class="flex h-full flex-col space-y-4">
|
||||||
|
<Textarea
|
||||||
|
placeholder="Write a tagline for an ice cream shop"
|
||||||
|
class="min-h-[400px] flex-1 p-4 md:min-h-[700px] lg:min-h-[700px]"
|
||||||
|
/>
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<Button>Submit</Button>
|
||||||
|
<Button variant="secondary">
|
||||||
|
<span class="sr-only">Show history</span>
|
||||||
|
<CounterClockwiseClockIcon class="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
<TabsContent value="insert" class="mt-0 border-0 p-0">
|
||||||
|
<div class="flex flex-col space-y-4">
|
||||||
|
<div class="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!"
|
||||||
|
class="h-full min-h-[300px] lg:min-h-[700px] xl:min-h-[700px]"
|
||||||
|
/>
|
||||||
|
<div class="rounded-md border bg-muted" />
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<Button>Submit</Button>
|
||||||
|
<Button variant="secondary">
|
||||||
|
<span class="sr-only">Show history</span>
|
||||||
|
<CounterClockwiseClockIcon class="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
<TabsContent value="edit" class="mt-0 border-0 p-0">
|
||||||
|
<div class="flex flex-col space-y-4">
|
||||||
|
<div class="grid h-full gap-6 lg:grid-cols-2">
|
||||||
|
<div class="flex flex-col space-y-4">
|
||||||
|
<div class="flex flex-1 flex-col space-y-2">
|
||||||
|
<Label for="input">Input</Label>
|
||||||
|
<Textarea
|
||||||
|
id="input"
|
||||||
|
placeholder="We is going to the market."
|
||||||
|
class="flex-1 lg:min-h-[580px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col space-y-2">
|
||||||
|
<Label for="instructions">Instructions</Label>
|
||||||
|
<Textarea
|
||||||
|
id="instructions"
|
||||||
|
placeholder="Fix the grammar."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-[21px] min-h-[400px] rounded-md border bg-muted lg:min-h-[700px]" />
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<Button>Submit</Button>
|
||||||
|
<Button variant="secondary">
|
||||||
|
<span class="sr-only">Show history</span>
|
||||||
|
<CounterClockwiseClockIcon class="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
84
apps/www/src/examples/playground/components/CodeViewer.vue
Normal file
84
apps/www/src/examples/playground/components/CodeViewer.vue
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Button } from '@/lib/registry/default/ui/button'
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from '@/lib/registry/default/ui/dialog'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger as-child>
|
||||||
|
<Button variant="secondary">
|
||||||
|
View code
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent class="sm:max-w-[625px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>View code</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
You can use the following code to start integrating your current
|
||||||
|
prompt and settings into your application.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div class="grid gap-4">
|
||||||
|
<div class="rounded-md bg-black p-6">
|
||||||
|
<pre>
|
||||||
|
<code class="grid gap-1 text-sm text-muted-foreground [&_span]:h-4">
|
||||||
|
<span>
|
||||||
|
<span class="text-sky-300">import</span> os
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<span class="text-sky-300">import</span> openai
|
||||||
|
</span>
|
||||||
|
<span />
|
||||||
|
<span>
|
||||||
|
openai.api_key = os.getenv(
|
||||||
|
<span class="text-green-300">
|
||||||
|
"OPENAI_API_KEY"
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
</span>
|
||||||
|
<span />
|
||||||
|
<span>response = openai.Completion.create(</span>
|
||||||
|
<span>
|
||||||
|
model=
|
||||||
|
<span class="text-green-300">"davinci"</span>,
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
prompt=<span class="text-amber-300">""</span>,
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
temperature=<span class="text-amber-300">0.9</span>,
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
max_tokens=<span class="text-amber-300">5</span>,
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
top_p=<span class="text-amber-300">1</span>,
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
frequency_penalty=<span class="text-amber-300">0</span>,
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
presence_penalty=<span class="text-green-300">0</span>,
|
||||||
|
</span>
|
||||||
|
<span>)</span>
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Your API Key can be found here. You should use environment
|
||||||
|
variables or a secret management tool to expose your key to your
|
||||||
|
applications.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { SliderRootProps } from 'radix-vue'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import {
|
||||||
|
HoverCard,
|
||||||
|
HoverCardContent,
|
||||||
|
HoverCardTrigger,
|
||||||
|
} from '@/lib/registry/default/ui/hover-card'
|
||||||
|
import { Label } from '@/lib/registry/default/ui/label'
|
||||||
|
import { Slider } from '@/lib/registry/default/ui/slider'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
defaultValue: SliderRootProps['defaultValue']
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const value = ref(props.defaultValue)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="grid gap-2 pt-2">
|
||||||
|
<HoverCard :open-delay="200">
|
||||||
|
<HoverCardTrigger as-child>
|
||||||
|
<div class="grid gap-4">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<Label for="maxlength">Maximum Length</Label>
|
||||||
|
<span class="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
|
||||||
|
{{ value?.[0] }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<Slider
|
||||||
|
id="maxlength"
|
||||||
|
v-model="value"
|
||||||
|
:max="4000"
|
||||||
|
:step="10"
|
||||||
|
class="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
|
||||||
|
aria-label="Maximum Length"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</HoverCardTrigger>
|
||||||
|
<HoverCardContent
|
||||||
|
align="start"
|
||||||
|
class="w-[260px] text-sm"
|
||||||
|
side="left"
|
||||||
|
>
|
||||||
|
The maximum number of tokens to generate. Requests can use up to 2,048
|
||||||
|
or 4,000 tokens, shared between prompt and completion. The exact limit
|
||||||
|
varies by model.
|
||||||
|
</HoverCardContent>
|
||||||
|
</HoverCard>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div />
|
||||||
|
</template>
|
||||||
114
apps/www/src/examples/playground/components/PresetActions.vue
Normal file
114
apps/www/src/examples/playground/components/PresetActions.vue
Normal file
|
|
@ -0,0 +1,114 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import DotsHorizontalIcon from '~icons/radix-icons/dots-horizontal'
|
||||||
|
|
||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
} from '@/lib/registry/default/ui/alert-dialog'
|
||||||
|
import { Button } from '@/lib/registry/default/ui/button'
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from '@/lib/registry/default/ui/dialog'
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '@/lib/registry/default/ui/dropdown-menu'
|
||||||
|
import { Label } from '@/lib/registry/default/ui/label'
|
||||||
|
import { Switch } from '@/lib/registry/default/ui/switch'
|
||||||
|
|
||||||
|
// import { toast } from "@/lib/registry/default/ui/use-toast"
|
||||||
|
|
||||||
|
const open = ref(false)
|
||||||
|
const showDeleteDialog = ref(false)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger as-child>
|
||||||
|
<Button variant="secondary">
|
||||||
|
<span class="sr-only">Actions</span>
|
||||||
|
<DotsHorizontalIcon class="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
<DropdownMenuItem @select="open = true">
|
||||||
|
Content filter preferences
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem
|
||||||
|
class="text-red-600"
|
||||||
|
@select="showDeleteDialog = true"
|
||||||
|
>
|
||||||
|
Delete preset
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
<Dialog v-model:open="open">
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Content filter preferences</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
The content filter flags text that may violate our content policy.
|
||||||
|
It's powered by our moderation endpoint which is free to use
|
||||||
|
to moderate your OpenAI API traffic. Learn more.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div class="py-6">
|
||||||
|
<h4 class="text-sm text-muted-foreground">
|
||||||
|
Playground Warnings
|
||||||
|
</h4>
|
||||||
|
<div class="flex items-start justify-between space-x-4 pt-3">
|
||||||
|
<Switch id="show" name="show" :default-checked="true" />
|
||||||
|
<Label class="grid gap-1 font-normal" for="show">
|
||||||
|
<span class="font-semibold">
|
||||||
|
Show a warning when content is flagged
|
||||||
|
</span>
|
||||||
|
<span class="text-sm text-muted-foreground">
|
||||||
|
A warning will be shown when sexual, hateful, violent or
|
||||||
|
self-harm content is detected.
|
||||||
|
</span>
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="secondary" @click="open = false">
|
||||||
|
Close
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
<AlertDialog v-model:open="showDeleteDialog">
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Are you sure absolutely sure?</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
This action cannot be undone. This preset will no longer be
|
||||||
|
accessible by you or others you've shared it with.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
@click="showDeleteDialog = false"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
</template>
|
||||||
48
apps/www/src/examples/playground/components/PresetSave.vue
Normal file
48
apps/www/src/examples/playground/components/PresetSave.vue
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Button } from '@/lib/registry/default/ui/button'
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from '@/lib/registry/default/ui/dialog'
|
||||||
|
import { Input } from '@/lib/registry/default/ui/input'
|
||||||
|
import { Label } from '@/lib/registry/default/ui/label'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger as-child>
|
||||||
|
<Button variant="secondary">
|
||||||
|
Save
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent class="sm:max-w-[475px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Save preset</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
This will save the current playground state as a preset which you
|
||||||
|
can access later or share with others.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div class="grid gap-4 py-4">
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<Label for="name">Name</Label>
|
||||||
|
<Input id="name" auto-focus />
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<Label for="description">Description</Label>
|
||||||
|
<Input id="description" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button type="submit">
|
||||||
|
Save
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div />
|
||||||
|
</template>
|
||||||
50
apps/www/src/examples/playground/components/PresetShare.vue
Normal file
50
apps/www/src/examples/playground/components/PresetShare.vue
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import CopyIcon from '~icons/radix-icons/copy'
|
||||||
|
|
||||||
|
import { Button } from '@/lib/registry/default/ui/button'
|
||||||
|
import { Input } from '@/lib/registry/default/ui/input'
|
||||||
|
import { Label } from '@/lib/registry/default/ui/label'
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from '@/lib/registry/default/ui/popover'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger as-child>
|
||||||
|
<Button variant="secondary">
|
||||||
|
Share
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent align="end" class="w-[520px]">
|
||||||
|
<div class="flex flex-col space-y-2 text-center sm:text-left">
|
||||||
|
<h3 class="text-lg font-semibold">
|
||||||
|
Share preset
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Anyone who has this link and an OpenAI account will be able to view
|
||||||
|
this.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-2 pt-4">
|
||||||
|
<div class="grid flex-1 gap-2">
|
||||||
|
<Label for="link" class="sr-only">
|
||||||
|
Link
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="link"
|
||||||
|
default-value="https://platform.openai.com/playground/p/7bbKYQvsVkNmVb8NGcdUOLae?model=text-davinci-003"
|
||||||
|
read-only
|
||||||
|
class="h-9"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button type="submit" size="sm" class="px-3">
|
||||||
|
<span class="sr-only">Copy</span>
|
||||||
|
<CopyIcon class="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { SliderRootProps } from 'radix-vue'
|
||||||
|
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import {
|
||||||
|
HoverCard,
|
||||||
|
HoverCardContent,
|
||||||
|
HoverCardTrigger,
|
||||||
|
} from '@/lib/registry/default/ui/hover-card'
|
||||||
|
import { Label } from '@/lib/registry/default/ui/label'
|
||||||
|
import { Slider } from '@/lib/registry/default/ui/slider'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
defaultValue: SliderRootProps['defaultValue']
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const value = ref(props.defaultValue)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="grid gap-2 pt-2">
|
||||||
|
<HoverCard :open-delay="200">
|
||||||
|
<HoverCardTrigger as-child>
|
||||||
|
<div class="grid gap-4">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<Label for="temperature">Temperature</Label>
|
||||||
|
<span class="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
|
||||||
|
{{ value?.[0] }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<Slider
|
||||||
|
id="temperature"
|
||||||
|
v-model="value"
|
||||||
|
:max="1"
|
||||||
|
:step="0.1"
|
||||||
|
class="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
|
||||||
|
aria-label="Temperature"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</HoverCardTrigger>
|
||||||
|
<HoverCardContent
|
||||||
|
align="start"
|
||||||
|
class="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>
|
||||||
|
</template>
|
||||||
51
apps/www/src/examples/playground/components/TopPSelector.vue
Normal file
51
apps/www/src/examples/playground/components/TopPSelector.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { SliderRootProps } from 'radix-vue'
|
||||||
|
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import {
|
||||||
|
HoverCard,
|
||||||
|
HoverCardContent,
|
||||||
|
HoverCardTrigger,
|
||||||
|
} from '@/lib/registry/default/ui/hover-card'
|
||||||
|
import { Label } from '@/lib/registry/default/ui/label'
|
||||||
|
import { Slider } from '@/lib/registry/default/ui/slider'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
defaultValue: SliderRootProps['defaultValue']
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const value = ref(props.defaultValue)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="grid gap-2 pt-2">
|
||||||
|
<HoverCard :open-delay="200">
|
||||||
|
<HoverCardTrigger as-child>
|
||||||
|
<div class="grid gap-4">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<Label for="top-p">Top P</Label>
|
||||||
|
<span class="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
|
||||||
|
{{ value?.[0] }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<Slider
|
||||||
|
id="top-p"
|
||||||
|
v-model="value"
|
||||||
|
:max="1"
|
||||||
|
:step="0.1"
|
||||||
|
class="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
|
||||||
|
aria-label="Top P"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</HoverCardTrigger>
|
||||||
|
<HoverCardContent
|
||||||
|
align="start"
|
||||||
|
class="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>
|
||||||
|
</template>
|
||||||
62
apps/www/src/examples/playground/data/models.ts
Normal file
62
apps/www/src/examples/playground/data/models.ts
Normal file
|
|
@ -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',
|
||||||
|
},
|
||||||
|
]
|
||||||
47
apps/www/src/examples/playground/data/presets.ts
Normal file
47
apps/www/src/examples/playground/data/presets.ts
Normal file
|
|
@ -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',
|
||||||
|
},
|
||||||
|
]
|
||||||
Loading…
Reference in New Issue
Block a user