import { RotateCcw } 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 { 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 default function PlaygroundPage() { return (

Playground

Mode 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. Complete Insert Edit

<div className="flex items-center gap-2">
                    <Button>Submit</Button>
                    <Button variant="secondary">
                      <span className="sr-only">Show history</span>
                      <RotateCcw />
                    </Button>
                  </div>
                </div>
              </TabsContent>
              <TabsContent value="insert" className="mt-0 flex flex-col gap-4 border-0 p-0">
                <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 p-4"
                  />
                  <div className="bg-muted rounded-md border"></div>
                </div>
                <div className="flex items-center gap-2">
                  <Button>Submit</Button>
                  <Button variant="secondary">
                    <span className="sr-only">Show history</span>
                    <RotateCcw />
                  </Button>
                </div>
              </TabsContent>
              <TabsContent value="edit" className="mt-0 flex flex-col gap-4 border-0 p-0">
                <div className="grid h-full gap-6 lg:grid-cols-2">
                  <div className="flex flex-col gap-4">
                    <div className="flex flex-1 flex-col gap-2">
                      <Label htmlFor="input" className="sr-only">
                        Input
                      </Label>
                      <Textarea
                        id="input"
                        placeholder="We is going to the market."
                        className="flex-1 p-4"
                      />
                    </div>
                    <div className="flex flex-col gap-2">
                      <Label htmlFor="instructions">Instructions</Label>
                      <Textarea id="instructions" placeholder="Fix the grammar." />
                    </div>
                  </div>
                  <div className="bg-muted rounded-md border" />
                </div>
                <div className="flex items-center gap-2">
                  <Button>Submit</Button>
                  <Button variant="secondary">
                    <span className="sr-only">Show history</span>
                    <RotateCcw />
                  </Button>
                </div>
              </TabsContent>
            </div>
          </div>
        </div>
      </Tabs>
    </div>
  );
}
</article></body></html>