Commit
•
048071f
1
Parent(s):
6463491
experimenting with things
Browse files- README.md +2 -1
- package-lock.json +0 -0
- package.json +2 -0
- public/layouts/layout4 hd.jpg +0 -0
- public/layouts/layout4.jpg +0 -0
- src/app/engine/render.ts +6 -1
- src/app/interface/page/index.tsx +3 -7
- src/app/interface/top-menu/index.tsx +2 -1
- src/app/layouts/index.tsx +88 -5
- src/app/queries/getStory.ts +3 -0
- src/app/queries/mockLLMResponse.ts +24 -0
- src/components/ui/dialog.tsx +1 -2
- tailwind.config.js +8 -0
README.md
CHANGED
@@ -36,7 +36,8 @@ Rendering config:
|
|
36 |
- `RENDERING_HF_INFERENCE_ENDPOINT_URL`: necessary if you decide to use a custom inference endpoint
|
37 |
- `RENDERING_REPLICATE_API_MODEL_VERSION`: url to the VideoChain API server
|
38 |
- `RENDERING_HF_INFERENCE_ENDPOINT_URL`: optional, default to nothing
|
39 |
-
- `
|
|
|
40 |
- `RENDERING_REPLICATE_API_MODEL`: optional, defaults to "stabilityai/sdxl"
|
41 |
- `RENDERING_REPLICATE_API_MODEL_VERSION`: optional, in case you want to change the version
|
42 |
|
|
|
36 |
- `RENDERING_HF_INFERENCE_ENDPOINT_URL`: necessary if you decide to use a custom inference endpoint
|
37 |
- `RENDERING_REPLICATE_API_MODEL_VERSION`: url to the VideoChain API server
|
38 |
- `RENDERING_HF_INFERENCE_ENDPOINT_URL`: optional, default to nothing
|
39 |
+
- `RENDERING_HF_INFERENCE_API_BASE_MODEL`: optional, defaults to "stabilityai/stable-diffusion-xl-base-1.0"
|
40 |
+
- `RENDERING_HF_INFERENCE_API_REFINER_MODEL`: optional, defaults to "stabilityai/stable-diffusion-xl-refiner-1.0"
|
41 |
- `RENDERING_REPLICATE_API_MODEL`: optional, defaults to "stabilityai/sdxl"
|
42 |
- `RENDERING_REPLICATE_API_MODEL_VERSION`: optional, in case you want to change the version
|
43 |
|
package-lock.json
CHANGED
The diff for this file is too large to render.
See raw diff
|
|
package.json
CHANGED
@@ -42,6 +42,7 @@
|
|
42 |
"eslint": "8.45.0",
|
43 |
"eslint-config-next": "13.4.10",
|
44 |
"html2canvas": "^1.4.1",
|
|
|
45 |
"lucide-react": "^0.260.0",
|
46 |
"next": "13.4.10",
|
47 |
"openai": "^4.10.0",
|
@@ -51,6 +52,7 @@
|
|
51 |
"react-circular-progressbar": "^2.1.0",
|
52 |
"react-dom": "18.2.0",
|
53 |
"react-icons": "^4.11.0",
|
|
|
54 |
"react-virtualized-auto-sizer": "^1.0.20",
|
55 |
"replicate": "^0.17.0",
|
56 |
"sbd": "^1.0.19",
|
|
|
42 |
"eslint": "8.45.0",
|
43 |
"eslint-config-next": "13.4.10",
|
44 |
"html2canvas": "^1.4.1",
|
45 |
+
"konva": "^9.2.2",
|
46 |
"lucide-react": "^0.260.0",
|
47 |
"next": "13.4.10",
|
48 |
"openai": "^4.10.0",
|
|
|
52 |
"react-circular-progressbar": "^2.1.0",
|
53 |
"react-dom": "18.2.0",
|
54 |
"react-icons": "^4.11.0",
|
55 |
+
"react-konva": "^18.2.10",
|
56 |
"react-virtualized-auto-sizer": "^1.0.20",
|
57 |
"replicate": "^0.17.0",
|
58 |
"sbd": "^1.0.19",
|
public/layouts/layout4 hd.jpg
ADDED
![]() |
public/layouts/layout4.jpg
ADDED
![]() |
src/app/engine/render.ts
CHANGED
@@ -169,6 +169,10 @@ export async function newRender({
|
|
169 |
|
170 |
// note: there is no "refiner" step yet for custom inference endpoint
|
171 |
// you probably don't need it anyway, as you probably want to deploy an all-in-one model instead for perf reasons
|
|
|
|
|
|
|
|
|
172 |
if (renderingEngine === "INFERENCE_API") {
|
173 |
try {
|
174 |
const refinerModelUrl = `https://api-inference.huggingface.co/models/${huggingFaceInferenceApiRefinerModel}`
|
@@ -213,7 +217,8 @@ export async function newRender({
|
|
213 |
} catch (err) {
|
214 |
console.log(`Refiner step failed, but this is not a blocker. Error details: ${err}`)
|
215 |
}
|
216 |
-
}
|
|
|
217 |
|
218 |
return {
|
219 |
renderId: uuidv4(),
|
|
|
169 |
|
170 |
// note: there is no "refiner" step yet for custom inference endpoint
|
171 |
// you probably don't need it anyway, as you probably want to deploy an all-in-one model instead for perf reasons
|
172 |
+
|
173 |
+
// update: right now it is not possible to use it from the Inference API either:
|
174 |
+
// "Model type not found or pipeline not implemented"
|
175 |
+
/*
|
176 |
if (renderingEngine === "INFERENCE_API") {
|
177 |
try {
|
178 |
const refinerModelUrl = `https://api-inference.huggingface.co/models/${huggingFaceInferenceApiRefinerModel}`
|
|
|
217 |
} catch (err) {
|
218 |
console.log(`Refiner step failed, but this is not a blocker. Error details: ${err}`)
|
219 |
}
|
220 |
+
} */
|
221 |
+
|
222 |
|
223 |
return {
|
224 |
renderId: uuidv4(),
|
src/app/interface/page/index.tsx
CHANGED
@@ -1,4 +1,4 @@
|
|
1 |
-
import { allLayouts } from "@/app/layouts"
|
2 |
import { useStore } from "@/app/store"
|
3 |
import { cn } from "@/lib/utils"
|
4 |
import { useEffect, useRef } from "react"
|
@@ -9,7 +9,7 @@ export function Page({ page }: { page: number }) {
|
|
9 |
// const prompt = useStore(state => state.prompt)
|
10 |
|
11 |
const LayoutElement = (allLayouts as any)[layouts[page]]
|
12 |
-
|
13 |
/*
|
14 |
const [canLoad, setCanLoad] = useState(false)
|
15 |
useEffect(() => {
|
@@ -36,11 +36,7 @@ export function Page({ page }: { page: number }) {
|
|
36 |
ref={pageRef}
|
37 |
className={cn(
|
38 |
`w-full`,
|
39 |
-
|
40 |
-
// we are using aspect-[297/210] because it matches A4 (297mm x 210mm)
|
41 |
-
// `aspect-[210/297]`,
|
42 |
-
`aspect-[250/297]`,
|
43 |
-
|
44 |
`transition-all duration-100 ease-in-out`,
|
45 |
`border border-stone-200`,
|
46 |
`shadow-2xl`,
|
|
|
1 |
+
import { allLayoutAspectRatios, allLayouts } from "@/app/layouts"
|
2 |
import { useStore } from "@/app/store"
|
3 |
import { cn } from "@/lib/utils"
|
4 |
import { useEffect, useRef } from "react"
|
|
|
9 |
// const prompt = useStore(state => state.prompt)
|
10 |
|
11 |
const LayoutElement = (allLayouts as any)[layouts[page]]
|
12 |
+
const aspectRatio = ((allLayoutAspectRatios as any)[layouts[page]] as string) || "aspect-[250/297]"
|
13 |
/*
|
14 |
const [canLoad, setCanLoad] = useState(false)
|
15 |
useEffect(() => {
|
|
|
36 |
ref={pageRef}
|
37 |
className={cn(
|
38 |
`w-full`,
|
39 |
+
aspectRatio,
|
|
|
|
|
|
|
|
|
40 |
`transition-all duration-100 ease-in-out`,
|
41 |
`border border-stone-200`,
|
42 |
`shadow-2xl`,
|
src/app/interface/top-menu/index.tsx
CHANGED
@@ -31,7 +31,8 @@ const layoutIcons: Partial<Record<LayoutName, StaticImageData>> = {
|
|
31 |
Layout0: layoutPreview0,
|
32 |
Layout1: layoutPreview1,
|
33 |
Layout2: layoutPreview2,
|
34 |
-
Layout3: layoutPreview3
|
|
|
35 |
}
|
36 |
|
37 |
export function TopMenu() {
|
|
|
31 |
Layout0: layoutPreview0,
|
32 |
Layout1: layoutPreview1,
|
33 |
Layout2: layoutPreview2,
|
34 |
+
Layout3: layoutPreview3,
|
35 |
+
Layout4: undefined,
|
36 |
}
|
37 |
|
38 |
export function TopMenu() {
|
src/app/layouts/index.tsx
CHANGED
@@ -252,21 +252,104 @@ export function Layout3() {
|
|
252 |
)
|
253 |
}
|
254 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
255 |
// export const layouts = { Layout1, Layout2_todo, Layout3_todo, Layout4_todo, Layout2, Layout3 }
|
256 |
export const allLayouts = {
|
257 |
random: <></>,
|
258 |
Layout0,
|
259 |
Layout1,
|
260 |
Layout2,
|
261 |
-
Layout3
|
|
|
262 |
}
|
263 |
|
264 |
export const allLayoutLabels = {
|
265 |
random: "Random layout",
|
266 |
-
Layout0: "
|
267 |
-
Layout1: "
|
268 |
-
Layout2: "
|
269 |
-
Layout3: "
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
270 |
}
|
271 |
|
272 |
export type LayoutName = keyof typeof allLayouts
|
|
|
252 |
)
|
253 |
}
|
254 |
|
255 |
+
// squares + vertical
|
256 |
+
export function Layout4() {
|
257 |
+
return (
|
258 |
+
<Grid className="grid-cols-8 grid-rows-8">
|
259 |
+
<div className="bg-zinc-100 col-start-1 col-end-7 row-start-1 row-end-3">
|
260 |
+
<Panel
|
261 |
+
panel={0}
|
262 |
+
width={512}
|
263 |
+
height={1024}
|
264 |
+
/>
|
265 |
+
</div>
|
266 |
+
<div className="bg-zinc-100 col-start-3 col-end-9 row-start-3 row-end-4">
|
267 |
+
<Panel
|
268 |
+
panel={1}
|
269 |
+
width={1024}
|
270 |
+
height={768}
|
271 |
+
/>
|
272 |
+
</div>
|
273 |
+
<div className="bg-stone-100 col-start-2 col-end-8 row-start-4 row-end-6">
|
274 |
+
<Panel
|
275 |
+
panel={2}
|
276 |
+
width={768}
|
277 |
+
height={1024}
|
278 |
+
/>
|
279 |
+
</div>
|
280 |
+
<div className="bg-slate-100 col-start-1 col-end-9 row-start-6 row-end-8">
|
281 |
+
<Panel
|
282 |
+
panel={3}
|
283 |
+
width={1024}
|
284 |
+
height={512}
|
285 |
+
/>
|
286 |
+
</div>
|
287 |
+
</Grid>
|
288 |
+
)
|
289 |
+
}
|
290 |
+
|
291 |
+
// squares + horizontal
|
292 |
+
export function Layout5() {
|
293 |
+
return (
|
294 |
+
<Grid className="grid-cols-4 grid-rows-4">
|
295 |
+
<div className="bg-zinc-100">
|
296 |
+
<Panel
|
297 |
+
panel={0}
|
298 |
+
width={1024}
|
299 |
+
height={1024}
|
300 |
+
/>
|
301 |
+
</div>
|
302 |
+
<div className="bg-zinc-100">
|
303 |
+
<Panel
|
304 |
+
panel={1}
|
305 |
+
width={1024}
|
306 |
+
height={1024}
|
307 |
+
/>
|
308 |
+
</div>
|
309 |
+
<div className="bg-stone-100">
|
310 |
+
<Panel
|
311 |
+
panel={2}
|
312 |
+
width={1024}
|
313 |
+
height={1024}
|
314 |
+
/>
|
315 |
+
</div>
|
316 |
+
<div className="bg-slate-100">
|
317 |
+
<Panel
|
318 |
+
panel={3}
|
319 |
+
width={1024}
|
320 |
+
height={1024}
|
321 |
+
/>
|
322 |
+
</div>
|
323 |
+
</Grid>
|
324 |
+
)
|
325 |
+
}
|
326 |
+
|
327 |
// export const layouts = { Layout1, Layout2_todo, Layout3_todo, Layout4_todo, Layout2, Layout3 }
|
328 |
export const allLayouts = {
|
329 |
random: <></>,
|
330 |
Layout0,
|
331 |
Layout1,
|
332 |
Layout2,
|
333 |
+
Layout3,
|
334 |
+
Layout4
|
335 |
}
|
336 |
|
337 |
export const allLayoutLabels = {
|
338 |
random: "Random layout",
|
339 |
+
Layout0: "Grid 0",
|
340 |
+
Layout1: "Grid 1",
|
341 |
+
Layout2: "Grid 2",
|
342 |
+
Layout3: "Grid 3",
|
343 |
+
// Layout4: "Blocks 1",
|
344 |
+
}
|
345 |
+
|
346 |
+
// note for reference: A4 (297mm x 210mm)
|
347 |
+
export const allLayoutAspectRatios = {
|
348 |
+
Layout0: "aspect-[250/297]",
|
349 |
+
Layout1: "aspect-[250/297]",
|
350 |
+
Layout2: "aspect-[250/297]",
|
351 |
+
Layout3: "aspect-[250/297]",
|
352 |
+
// Layout4: "aspect-[1/3]",
|
353 |
}
|
354 |
|
355 |
export type LayoutName = keyof typeof allLayouts
|
src/app/queries/getStory.ts
CHANGED
@@ -16,6 +16,9 @@ export const getStory = async ({
|
|
16 |
prompt: string;
|
17 |
}): Promise<LLMResponse> => {
|
18 |
|
|
|
|
|
|
|
19 |
const query = createLlamaPrompt([
|
20 |
{
|
21 |
role: "system",
|
|
|
16 |
prompt: string;
|
17 |
}): Promise<LLMResponse> => {
|
18 |
|
19 |
+
// In case you need to quickly debug the RENDERING engine you can uncomment this:
|
20 |
+
// return mockLLMResponse
|
21 |
+
|
22 |
const query = createLlamaPrompt([
|
23 |
{
|
24 |
role: "system",
|
src/app/queries/mockLLMResponse.ts
ADDED
@@ -0,0 +1,24 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import { LLMResponse } from "@/types"
|
2 |
+
|
3 |
+
export const mockLLMResponse: LLMResponse = [
|
4 |
+
{
|
5 |
+
"panel": 1,
|
6 |
+
"instructions": "Close-up of cat's face, looking straight at reader with a smirk on its face",
|
7 |
+
"caption": "Feline mischief"
|
8 |
+
},
|
9 |
+
{
|
10 |
+
"panel": 2,
|
11 |
+
"instructions": "Medium shot of cat sniffing a glass of milk, with a surprised expression",
|
12 |
+
"caption": "Uh oh, what's this?"
|
13 |
+
},
|
14 |
+
{
|
15 |
+
"panel": 3,
|
16 |
+
"instructions": "Wide shot of cat knocking over the glass of milk, with a crazed look in its eyes",
|
17 |
+
"caption": "Cat-astrophe!"
|
18 |
+
},
|
19 |
+
{
|
20 |
+
"panel": 4,
|
21 |
+
"instructions": "Close-up of cat's face, looking satisfied with a milk moustache",
|
22 |
+
"caption": "Mission accomplished"
|
23 |
+
}
|
24 |
+
]
|
src/components/ui/dialog.tsx
CHANGED
@@ -11,10 +11,9 @@ const Dialog = DialogPrimitive.Root
|
|
11 |
const DialogTrigger = DialogPrimitive.Trigger
|
12 |
|
13 |
const DialogPortal = ({
|
14 |
-
className,
|
15 |
...props
|
16 |
}: DialogPrimitive.DialogPortalProps) => (
|
17 |
-
<DialogPrimitive.Portal
|
18 |
)
|
19 |
DialogPortal.displayName = DialogPrimitive.Portal.displayName
|
20 |
|
|
|
11 |
const DialogTrigger = DialogPrimitive.Trigger
|
12 |
|
13 |
const DialogPortal = ({
|
|
|
14 |
...props
|
15 |
}: DialogPrimitive.DialogPortalProps) => (
|
16 |
+
<DialogPrimitive.Portal {...props} />
|
17 |
)
|
18 |
DialogPortal.displayName = DialogPrimitive.Portal.displayName
|
19 |
|
tailwind.config.js
CHANGED
@@ -57,6 +57,14 @@ module.exports = {
|
|
57 |
},
|
58 |
screens: {
|
59 |
'print': { 'raw': 'print' },
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
60 |
}
|
61 |
},
|
62 |
},
|
|
|
57 |
},
|
58 |
screens: {
|
59 |
'print': { 'raw': 'print' },
|
60 |
+
},
|
61 |
+
gridTemplateColumns: {
|
62 |
+
'12': 'repeat(12, minmax(0, 1fr))',
|
63 |
+
'16': 'repeat(16, minmax(0, 1fr))',
|
64 |
+
},
|
65 |
+
gridTemplateRows: {
|
66 |
+
'12': 'repeat(12, minmax(0, 1fr))',
|
67 |
+
'16': 'repeat(16, minmax(0, 1fr))',
|
68 |
}
|
69 |
},
|
70 |
},
|