Playground

1import { Button } from "@/components/ui/button";
2import {
3  Dialog,
4  DialogContent,
5  DialogDescription,
6  DialogHeader,
7  DialogTitle,
8  DialogTrigger
9} from "@/components/ui/dialog";
10 
11export function CodeViewer() {
12  return (
13    <Dialog>
14      <DialogTrigger asChild>
15        <Button variant="secondary">View code</Button>
16      </DialogTrigger>
17      <DialogContent>
18        <DialogHeader>
19          <DialogTitle>View code</DialogTitle>
20          <DialogDescription>
21            You can use the following code to start integrating your current prompt and settings
22            into your application.
23          </DialogDescription>
24        </DialogHeader>
25        <div className="grid gap-4">
26          <div className="rounded-md bg-black p-6">
27            <pre>
28              <code className="grid gap-1 text-sm text-white [&_span]:h-4">
29                <span>
30                  <span className="text-sky-300">import</span> os
31                </span>
32                <span>
33                  <span className="text-sky-300">import</span> openai
34                </span>
35                <span />
36                <span>
37                  openai.api_key = os.getenv(
38                  <span className="text-green-300">&quot;OPENAI_API_KEY&quot;</span>)
39                </span>
40                <span />
41                <span>response = openai.Completion.create(</span>
42                <span>
43                  {" "}
44                  model=
45                  <span className="text-green-300">&quot;davinci&quot;</span>,
46                </span>
47                <span>
48                  {" "}
49                  prompt=<span className="text-amber-300">&quot;&quot;</span>,
50                </span>
51                <span>
52                  {" "}
53                  temperature=<span className="text-amber-300">0.9</span>,
54                </span>
55                <span>
56                  {" "}
57                  max_tokens=<span className="text-amber-300">5</span>,
58                </span>
59                <span>
60                  {" "}
61                  top_p=<span className="text-amber-300">1</span>,
62                </span>
63                <span>
64                  {" "}
65                  frequency_penalty=<span className="text-amber-300">0</span>,
66                </span>
67                <span>
68                  {" "}
69                  presence_penalty=<span className="text-green-300">0</span>,
70                </span>
71                <span>)</span>
72              </code>
73            </pre>
74// … truncated