Skip to content

Commit 074bda0

Browse files
teampenteampen
committed
adding chatgpt 3.5 turbo
1 parent 5422660 commit 074bda0

17 files changed

+3163
-997
lines changed

‎.env.example

+6
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,9 @@ PROXY_SERVER=https://api.link.sc
77

88
# Analytics Settings
99
ANALYTICS_ENDPOINT=https://plausible.io/api/event
10+
11+
12+
# OpenAI
13+
OPENAI_API_KEY=changeme
14+
OPENPIPE_BASE_URL=http://localhost:4000/api/v1
15+
OPENPIPE_API_KEY=changeme

‎app/picker/page.js

+12-20
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,24 @@ import {
55
} from "@/components/ui/resizable"
66
import { RequestCard } from "@/components/request-card"
77
import { DataBuilder } from "@/components/data-builder";
8-
import {useState} from "react";
8+
import { useState } from "react";
99

1010
const fetchApiEndpoint = "/api/request";
1111

1212
export default function Picker() {
1313
const [html, setHtml] = useState(null);
14+
const [elements, setElements] = useState([])
15+
1416
return (
1517
<>
16-
<div className="relative flex min-h-screen flex-col bg-background">
17-
<div className="container relative p-5">
18-
<section>
19-
<div className="overflow-hidden rounded-[0.5rem] border bg-background shadow-md md:shadow-xl">
20-
<div className="hidden flex-col md:flex">
21-
<ResizablePanelGroup
22-
direction="horizontal"
23-
className="h-full max-h-[800px] items-stretch"
24-
>
25-
<RequestCard html={html} setHtml={setHtml}/>
26-
<ResizableHandle withHandle/>
27-
<DataBuilder html={html} setHtml={setHtml}/>
28-
</ResizablePanelGroup>
29-
</div>
30-
</div>
31-
</section>
32-
</div>
33-
</div>
18+
<ResizablePanelGroup
19+
direction="horizontal"
20+
className="h-full resize-y items-stretch"
21+
>
22+
<RequestCard html={html} setHtml={setHtml} elements={elements}/>
23+
<ResizableHandle withHandle/>
24+
<DataBuilder html={html} setHtml={setHtml} setElements={setElements}/>
25+
</ResizablePanelGroup>
3426
</>
35-
)
27+
)
3628
}

‎components/data-builder.js

+13-2
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,13 @@ import * as cheerio from 'cheerio';
1313
import { PlusCircledIcon, MinusCircledIcon} from "@radix-ui/react-icons"
1414
import {Button} from "@/components/ui/button";
1515

16-
export function DataBuilder({ html, setHtml, defaultLayout = [265, 440, 755]}) {
16+
export function DataBuilder({ html, setElements, defaultLayout = [265, 440, 755]}) {
1717
const [selectors, setSelectors] = useState([
1818
{"key": "title", "selector": ""}
1919
]);
2020
const [hasSelectors, setHasSelectors] = useState(false);
2121
const [data, setData] = useState({});
22+
2223
// check for updates to html, selectors
2324

2425
const updateSelectorKey = (e, i) => {
@@ -46,16 +47,26 @@ export function DataBuilder({ html, setHtml, defaultLayout = [265, 440, 755]}) {
4647
const selectorName = selector.key;
4748
console.log(`Finding elements with selector: ${selector.selector} for : ${selectorName}`)
4849
let $results = $(`${selector.selector}`);
50+
51+
// for prompting
52+
let $elements = [];
53+
4954
const values = []
5055
$results.each((i, e) => {
56+
$elements.push($.html(e));
57+
58+
// grab text
5159
let t = $(e).text();
5260
console.log(t)
5361
values.push(t);
5462
})
63+
64+
setElements($elements);
65+
5566
setData(data => ({
5667
...data,
5768
selectorName : values
58-
}))
69+
}));
5970
}
6071
}
6172
}

‎components/maxlength-selector.jsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import {
5+
HoverCard,
6+
HoverCardContent,
7+
HoverCardTrigger,
8+
} from "@/components/ui/hover-card"
9+
import { Label } from "@/components/ui/label"
10+
import { Slider } from "@/components/ui/slider"
11+
12+
export function MaxLengthSelector({ defaultValue }) {
13+
const [value, setValue] = React.useState(defaultValue)
14+
15+
return (
16+
<div className="grid gap-2 pt-2">
17+
<HoverCard openDelay={200}>
18+
<HoverCardTrigger asChild>
19+
<div className="grid gap-4">
20+
<div className="flex items-center justify-between">
21+
<Label htmlFor="maxlength">Maximum Length</Label>
22+
<span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
23+
{value}
24+
</span>
25+
</div>
26+
<Slider
27+
id="maxlength"
28+
max={4000}
29+
defaultValue={value}
30+
step={10}
31+
onValueChange={setValue}
32+
className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
33+
aria-label="Maximum Length"
34+
/>
35+
</div>
36+
</HoverCardTrigger>
37+
<HoverCardContent
38+
align="start"
39+
className="w-[260px] text-sm"
40+
side="left"
41+
>
42+
The maximum number of tokens to generate. Requests can use up to 2,048
43+
or 4,000 tokens, shared between prompt and completion. The exact limit
44+
varies by model.
45+
</HoverCardContent>
46+
</HoverCard>
47+
</div>
48+
)
49+
}

‎components/model-selector.jsx

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
5+
6+
import { cn } from "@/lib/utils"
7+
import { Button } from "@/components/ui/button"
8+
import {
9+
Command,
10+
CommandEmpty,
11+
CommandGroup,
12+
CommandInput,
13+
CommandItem,
14+
CommandList,
15+
} from "@/components/ui/command"
16+
import {
17+
HoverCard,
18+
HoverCardContent,
19+
HoverCardTrigger,
20+
} from "@/components/ui/hover-card"
21+
import { Label } from "@/components/ui/label"
22+
import {
23+
Popover,
24+
PopoverContent,
25+
PopoverTrigger,
26+
} from "@/components/ui/popover"
27+
28+
29+
export function ModelSelector({ models, types, ...props }) {
30+
const [open, setOpen] = React.useState(false)
31+
const [selectedModel, setSelectedModel] = React.useState(models[0])
32+
const [peekedModel, setPeekedModel] = React.useState(models[0])
33+
34+
return (
35+
<div className="grid gap-2">
36+
<HoverCard openDelay={200}>
37+
<HoverCardTrigger asChild>
38+
<Label htmlFor="model">Model</Label>
39+
</HoverCardTrigger>
40+
<HoverCardContent
41+
align="start"
42+
className="w-[260px] text-sm"
43+
side="left"
44+
>
45+
The model which will generate the completion. Some models are suitable
46+
for natural language tasks, others specialize in code. Learn more.
47+
</HoverCardContent>
48+
</HoverCard>
49+
<Popover open={open} onOpenChange={setOpen} {...props}>
50+
<PopoverTrigger asChild>
51+
<Button
52+
variant="outline"
53+
role="combobox"
54+
aria-expanded={open}
55+
aria-label="Select a model"
56+
className="w-full justify-between"
57+
>
58+
{selectedModel ? selectedModel.name : "Select a model..."}
59+
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
60+
</Button>
61+
</PopoverTrigger>
62+
<PopoverContent align="end" className="w-[250px] p-0">
63+
<HoverCard>
64+
<HoverCardContent
65+
side="left"
66+
align="start"
67+
forceMount
68+
className="min-h-[280px]"
69+
>
70+
<div className="grid gap-2">
71+
<h4 className="font-medium leading-none">{peekedModel.name}</h4>
72+
<div className="text-sm text-muted-foreground">
73+
{peekedModel.description}
74+
</div>
75+
{peekedModel.strengths ? (
76+
<div className="mt-4 grid gap-2">
77+
<h5 className="text-sm font-medium leading-none">
78+
Strengths
79+
</h5>
80+
<ul className="text-sm text-muted-foreground">
81+
{peekedModel.strengths}
82+
</ul>
83+
</div>
84+
) : null}
85+
</div>
86+
</HoverCardContent>
87+
<Command loop>
88+
<CommandList className="h-[var(--cmdk-list-height)] max-h-[400px]">
89+
<CommandInput placeholder="Search Models..." />
90+
<CommandEmpty>No Models found.</CommandEmpty>
91+
<HoverCardTrigger />
92+
{types.map((type) => (
93+
<CommandGroup key={type} heading={type}>
94+
{models
95+
.filter((model) => model.type === type)
96+
.map((model) => (
97+
<ModelItem
98+
key={model.id}
99+
model={model}
100+
isSelected={selectedModel?.id === model.id}
101+
onPeek={(model) => setPeekedModel(model)}
102+
onSelect={() => {
103+
setSelectedModel(model)
104+
setOpen(false)
105+
}}
106+
/>
107+
))}
108+
</CommandGroup>
109+
))}
110+
</CommandList>
111+
</Command>
112+
</HoverCard>
113+
</PopoverContent>
114+
</Popover>
115+
</div>
116+
)
117+
}
118+
119+
function ModelItem({ model, isSelected, onSelect, onPeek }) {
120+
return (
121+
<CommandItem
122+
key={model.id}
123+
onSelect={onSelect}
124+
className="aria-selected:bg-primary aria-selected:text-primary-foreground"
125+
>
126+
{model.name}
127+
<CheckIcon
128+
className={cn(
129+
"ml-auto h-4 w-4",
130+
isSelected ? "opacity-100" : "opacity-0"
131+
)}
132+
/>
133+
</CommandItem>
134+
)
135+
}

0 commit comments

Comments
 (0)