feat: add text-to-drawing
are
1 year ago
parent
0958241589
commit
530e92189f
@ -0,0 +1,228 @@
|
||||
import { useAtom } from "jotai";
|
||||
import { useRef, useState, ChangeEventHandler } from "react";
|
||||
import { trackEvent } from "../../analytics";
|
||||
import { t } from "../../i18n";
|
||||
import { isFiniteNumber } from "../../utils";
|
||||
import { ArrowRightIcon } from "../icons";
|
||||
import { TTDDialogInput } from "./TTDDialogInput";
|
||||
import { TTDDialogOutput } from "./TTDDialogOutput";
|
||||
import { TTDDialogPanel } from "./TTDDialogPanel";
|
||||
import { TTDDialogPanels } from "./TTDDialogPanels";
|
||||
import {
|
||||
CommonDialogProps,
|
||||
MAX_PROMPT_LENGTH,
|
||||
MIN_PROMPT_LENGTH,
|
||||
MermaidToExcalidrawLibProps,
|
||||
convertMermaidToExcalidraw,
|
||||
insertToEditor,
|
||||
rateLimitsAtom,
|
||||
saveMermaidDataToStorage,
|
||||
} from "./common";
|
||||
import { useApp } from "../App";
|
||||
import { NonDeletedExcalidrawElement } from "../../element/types";
|
||||
import { BinaryFiles } from "../../types";
|
||||
|
||||
export type TextToDiagramProps = CommonDialogProps & {
|
||||
mermaidToExcalidrawLib: MermaidToExcalidrawLibProps;
|
||||
};
|
||||
|
||||
export const TextToDiagram = ({
|
||||
onTextSubmit,
|
||||
mermaidToExcalidrawLib,
|
||||
}: TextToDiagramProps) => {
|
||||
const app = useApp();
|
||||
|
||||
const someRandomDivRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [text, setText] = useState("");
|
||||
|
||||
const prompt = text.trim();
|
||||
|
||||
const handleTextChange: ChangeEventHandler<HTMLTextAreaElement> = (event) => {
|
||||
setText(event.target.value);
|
||||
};
|
||||
|
||||
const [onTextSubmitInProgess, setOnTextSubmitInProgess] = useState(false);
|
||||
const [rateLimits, setRateLimits] = useAtom(rateLimitsAtom);
|
||||
|
||||
const data = useRef<{
|
||||
elements: readonly NonDeletedExcalidrawElement[];
|
||||
files: BinaryFiles | null;
|
||||
}>({ elements: [], files: null });
|
||||
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
const onGenerate = async () => {
|
||||
if (
|
||||
prompt.length > MAX_PROMPT_LENGTH ||
|
||||
prompt.length < MIN_PROMPT_LENGTH ||
|
||||
onTextSubmitInProgess ||
|
||||
rateLimits?.rateLimitRemaining === 0
|
||||
) {
|
||||
if (prompt.length < MIN_PROMPT_LENGTH) {
|
||||
setError(
|
||||
new Error(
|
||||
`Prompt is too short (min ${MIN_PROMPT_LENGTH} characters)`,
|
||||
),
|
||||
);
|
||||
}
|
||||
if (prompt.length > MAX_PROMPT_LENGTH) {
|
||||
setError(
|
||||
new Error(`Prompt is too long (max ${MAX_PROMPT_LENGTH} characters)`),
|
||||
);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setOnTextSubmitInProgess(true);
|
||||
|
||||
trackEvent("ai", "generate", "ttd");
|
||||
|
||||
const { generatedResponse, error, rateLimit, rateLimitRemaining } =
|
||||
await onTextSubmit(prompt, "text-to-diagram");
|
||||
|
||||
if (isFiniteNumber(rateLimit) && isFiniteNumber(rateLimitRemaining)) {
|
||||
setRateLimits({ rateLimit, rateLimitRemaining });
|
||||
}
|
||||
|
||||
if (error) {
|
||||
setError(error);
|
||||
return;
|
||||
}
|
||||
if (!generatedResponse) {
|
||||
setError(new Error("Generation failed"));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await convertMermaidToExcalidraw({
|
||||
canvasRef: someRandomDivRef,
|
||||
data,
|
||||
mermaidToExcalidrawLib,
|
||||
setError,
|
||||
mermaidDefinition: generatedResponse,
|
||||
});
|
||||
trackEvent("ai", "mermaid parse success", "ttd");
|
||||
saveMermaidDataToStorage(generatedResponse);
|
||||
} catch (error: any) {
|
||||
console.info(
|
||||
`%cTTD mermaid render errror: ${error.message}`,
|
||||
"color: red",
|
||||
);
|
||||
console.info(
|
||||
`>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>\nTTD mermaid definition render errror: ${error.message}`,
|
||||
"color: yellow",
|
||||
);
|
||||
trackEvent("ai", "mermaid parse failed", "ttd");
|
||||
setError(
|
||||
new Error(
|
||||
"Generated an invalid diagram :(. You may also try a different prompt.",
|
||||
),
|
||||
);
|
||||
}
|
||||
} catch (error: any) {
|
||||
let message: string | undefined = error.message;
|
||||
if (!message || message === "Failed to fetch") {
|
||||
message = "Request failed";
|
||||
}
|
||||
setError(new Error(message));
|
||||
} finally {
|
||||
setOnTextSubmitInProgess(false);
|
||||
}
|
||||
};
|
||||
|
||||
const refOnGenerate = useRef(onGenerate);
|
||||
refOnGenerate.current = onGenerate;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="ttd-dialog-desc">
|
||||
Currently we use Mermaid as a middle step, so you'll get best results if
|
||||
you describe a diagram, workflow, flow chart, and similar.
|
||||
</div>
|
||||
<TTDDialogPanels>
|
||||
<TTDDialogPanel
|
||||
label={t("labels.prompt")}
|
||||
panelAction={{
|
||||
action: onGenerate,
|
||||
label: "Generate",
|
||||
icon: ArrowRightIcon,
|
||||
}}
|
||||
onTextSubmitInProgess={onTextSubmitInProgess}
|
||||
panelActionDisabled={
|
||||
prompt.length > MAX_PROMPT_LENGTH ||
|
||||
rateLimits?.rateLimitRemaining === 0
|
||||
}
|
||||
renderTopRight={() => {
|
||||
if (!rateLimits) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="ttd-dialog-rate-limit"
|
||||
style={{
|
||||
fontSize: 12,
|
||||
marginLeft: "auto",
|
||||
color:
|
||||
rateLimits.rateLimitRemaining === 0
|
||||
? "var(--color-danger)"
|
||||
: undefined,
|
||||
}}
|
||||
>
|
||||
{rateLimits.rateLimitRemaining} requests left today
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
renderBottomRight={() => {
|
||||
const ratio = prompt.length / MAX_PROMPT_LENGTH;
|
||||
if (ratio > 0.8) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
marginLeft: "auto",
|
||||
fontSize: 12,
|
||||
fontFamily: "monospace",
|
||||
color: ratio > 1 ? "var(--color-danger)" : undefined,
|
||||
}}
|
||||
>
|
||||
Length: {prompt.length}/{MAX_PROMPT_LENGTH}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}}
|
||||
>
|
||||
<TTDDialogInput
|
||||
onChange={handleTextChange}
|
||||
input={text}
|
||||
placeholder={"Describe what you want to see..."}
|
||||
onKeyboardSubmit={() => {
|
||||
refOnGenerate.current();
|
||||
}}
|
||||
/>
|
||||
</TTDDialogPanel>
|
||||
<TTDDialogPanel
|
||||
label="Preview"
|
||||
panelAction={{
|
||||
action: () => {
|
||||
console.info("Panel action clicked");
|
||||
insertToEditor({ app, data: data.current });
|
||||
},
|
||||
label: "Insert",
|
||||
icon: ArrowRightIcon,
|
||||
}}
|
||||
>
|
||||
<TTDDialogOutput
|
||||
canvasRef={someRandomDivRef}
|
||||
error={error}
|
||||
loaded={mermaidToExcalidrawLib.loaded}
|
||||
/>
|
||||
</TTDDialogPanel>
|
||||
</TTDDialogPanels>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,248 @@
|
||||
import { useAtom } from "jotai";
|
||||
import { useRef, useState, ChangeEventHandler } from "react";
|
||||
import { trackEvent } from "../../analytics";
|
||||
import { NonDeletedExcalidrawElement } from "../../element/types";
|
||||
import { t } from "../../i18n";
|
||||
import { isFiniteNumber } from "../../utils";
|
||||
import { useApp } from "../App";
|
||||
import { ArrowRightIcon } from "../icons";
|
||||
import { TTDDialogInput } from "./TTDDialogInput";
|
||||
import { TTDDialogOutput } from "./TTDDialogOutput";
|
||||
import { TTDDialogPanel } from "./TTDDialogPanel";
|
||||
import { TTDDialogPanels } from "./TTDDialogPanels";
|
||||
import {
|
||||
CommonDialogProps,
|
||||
MAX_PROMPT_LENGTH,
|
||||
MIN_PROMPT_LENGTH,
|
||||
insertToEditor,
|
||||
rateLimitsAtom,
|
||||
resetPreview,
|
||||
} from "./common";
|
||||
import {
|
||||
convertToExcalidrawElements,
|
||||
exportToCanvas,
|
||||
} from "../../packages/excalidraw/index";
|
||||
import { DEFAULT_EXPORT_PADDING } from "../../constants";
|
||||
import { canvasToBlob } from "../../data/blob";
|
||||
|
||||
export type TextToDrawingProps = CommonDialogProps;
|
||||
|
||||
export const TextToDrawing = ({ onTextSubmit }: TextToDrawingProps) => {
|
||||
const app = useApp();
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [text, setText] = useState("");
|
||||
|
||||
const prompt = text.trim();
|
||||
|
||||
const handleTextChange: ChangeEventHandler<HTMLTextAreaElement> = (event) => {
|
||||
setText(event.target.value);
|
||||
};
|
||||
|
||||
const [onTextSubmitInProgess, setOnTextSubmitInProgess] = useState(false);
|
||||
const [rateLimits, setRateLimits] = useAtom(rateLimitsAtom);
|
||||
|
||||
const [data, setData] = useState<
|
||||
readonly NonDeletedExcalidrawElement[] | null
|
||||
>(null);
|
||||
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
const onGenerate = async () => {
|
||||
if (
|
||||
prompt.length > MAX_PROMPT_LENGTH ||
|
||||
prompt.length < MIN_PROMPT_LENGTH ||
|
||||
onTextSubmitInProgess ||
|
||||
rateLimits?.rateLimitRemaining === 0
|
||||
) {
|
||||
if (prompt.length < MIN_PROMPT_LENGTH) {
|
||||
setError(
|
||||
new Error(
|
||||
`Prompt is too short (min ${MIN_PROMPT_LENGTH} characters)`,
|
||||
),
|
||||
);
|
||||
}
|
||||
if (prompt.length > MAX_PROMPT_LENGTH) {
|
||||
setError(
|
||||
new Error(`Prompt is too long (max ${MAX_PROMPT_LENGTH} characters)`),
|
||||
);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setOnTextSubmitInProgess(true);
|
||||
|
||||
trackEvent("ai", "generate", "text-to-drawing");
|
||||
|
||||
const { generatedResponse, error, rateLimit, rateLimitRemaining } =
|
||||
await onTextSubmit(prompt, "text-to-drawing");
|
||||
|
||||
if (isFiniteNumber(rateLimit) && isFiniteNumber(rateLimitRemaining)) {
|
||||
setRateLimits({ rateLimit, rateLimitRemaining });
|
||||
}
|
||||
|
||||
if (error) {
|
||||
setError(error);
|
||||
return;
|
||||
}
|
||||
if (!generatedResponse) {
|
||||
setError(new Error("Generation failed"));
|
||||
return;
|
||||
}
|
||||
|
||||
const canvasNode = containerRef.current;
|
||||
const parent = canvasNode?.parentElement;
|
||||
|
||||
if (!canvasNode || !parent) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!text) {
|
||||
resetPreview({ canvasRef: containerRef, setError });
|
||||
return;
|
||||
}
|
||||
|
||||
if (!Array.isArray(generatedResponse)) {
|
||||
setError(new Error("Generation failed to return an array!"));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const elements = convertToExcalidrawElements(generatedResponse, {
|
||||
regenerateIds: true,
|
||||
});
|
||||
|
||||
setData(elements);
|
||||
|
||||
const canvas = await exportToCanvas({
|
||||
elements,
|
||||
files: null,
|
||||
exportPadding: DEFAULT_EXPORT_PADDING,
|
||||
maxWidthOrHeight:
|
||||
Math.max(parent.offsetWidth, parent.offsetHeight) *
|
||||
window.devicePixelRatio,
|
||||
});
|
||||
// if converting to blob fails, there's some problem that will
|
||||
// likely prevent preview and export (e.g. canvas too big)
|
||||
await canvasToBlob(canvas);
|
||||
parent.style.background = "var(--default-bg-color)";
|
||||
canvasNode.replaceChildren(canvas);
|
||||
} catch (err: any) {
|
||||
console.error(err);
|
||||
parent.style.background = "var(--default-bg-color)";
|
||||
if (text) {
|
||||
setError(err);
|
||||
}
|
||||
|
||||
throw err;
|
||||
}
|
||||
} catch (error: any) {
|
||||
let message: string | undefined = error.message;
|
||||
if (!message || message === "Failed to fetch") {
|
||||
message = "Request failed";
|
||||
}
|
||||
setError(new Error(message));
|
||||
} finally {
|
||||
setOnTextSubmitInProgess(false);
|
||||
}
|
||||
};
|
||||
|
||||
const refOnGenerate = useRef(onGenerate);
|
||||
refOnGenerate.current = onGenerate;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="ttd-dialog-desc">This is text to drawing.</div>
|
||||
<TTDDialogPanels>
|
||||
<TTDDialogPanel
|
||||
label={t("labels.prompt")}
|
||||
panelAction={{
|
||||
action: onGenerate,
|
||||
label: "Generate",
|
||||
icon: ArrowRightIcon,
|
||||
}}
|
||||
onTextSubmitInProgess={onTextSubmitInProgess}
|
||||
panelActionDisabled={
|
||||
prompt.length > MAX_PROMPT_LENGTH ||
|
||||
rateLimits?.rateLimitRemaining === 0
|
||||
}
|
||||
renderTopRight={() => {
|
||||
if (!rateLimits) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="ttd-dialog-rate-limit"
|
||||
style={{
|
||||
fontSize: 12,
|
||||
marginLeft: "auto",
|
||||
color:
|
||||
rateLimits.rateLimitRemaining === 0
|
||||
? "var(--color-danger)"
|
||||
: undefined,
|
||||
}}
|
||||
>
|
||||
{rateLimits.rateLimitRemaining} requests left today
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
renderBottomRight={() => {
|
||||
const ratio = prompt.length / MAX_PROMPT_LENGTH;
|
||||
if (ratio > 0.8) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
marginLeft: "auto",
|
||||
fontSize: 12,
|
||||
fontFamily: "monospace",
|
||||
color: ratio > 1 ? "var(--color-danger)" : undefined,
|
||||
}}
|
||||
>
|
||||
Length: {prompt.length}/{MAX_PROMPT_LENGTH}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}}
|
||||
>
|
||||
<TTDDialogInput
|
||||
onChange={handleTextChange}
|
||||
input={text}
|
||||
placeholder={"Describe what you want to see..."}
|
||||
onKeyboardSubmit={() => {
|
||||
refOnGenerate.current();
|
||||
}}
|
||||
/>
|
||||
</TTDDialogPanel>
|
||||
<TTDDialogPanel
|
||||
label="Preview"
|
||||
panelAction={{
|
||||
action: () => {
|
||||
if (data) {
|
||||
insertToEditor({
|
||||
app,
|
||||
data: {
|
||||
elements: data,
|
||||
files: null,
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
label: "Insert",
|
||||
icon: ArrowRightIcon,
|
||||
}}
|
||||
>
|
||||
<TTDDialogOutput
|
||||
canvasRef={containerRef}
|
||||
error={error}
|
||||
loaded={true}
|
||||
/>
|
||||
</TTDDialogPanel>
|
||||
</TTDDialogPanels>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,589 +0,0 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { t } from "../../i18n";
|
||||
import { useApp } from "../App";
|
||||
import { Dialog } from "../Dialog";
|
||||
import { TextField } from "../TextField";
|
||||
import Trans from "../Trans";
|
||||
import {
|
||||
CloseIcon,
|
||||
RedoIcon,
|
||||
ZoomInIcon,
|
||||
ZoomOutIcon,
|
||||
playerPlayIcon,
|
||||
playerStopFilledIcon,
|
||||
} from "../icons";
|
||||
import { NonDeletedExcalidrawElement } from "../../element/types";
|
||||
import { convertToExcalidrawElements } from "../../data/transform";
|
||||
import { exportToCanvas } from "../../packages/utils";
|
||||
import { DEFAULT_EXPORT_PADDING } from "../../constants";
|
||||
import { canvasToBlob } from "../../data/blob";
|
||||
|
||||
const testResponse = `{
|
||||
"error": false,
|
||||
"data": [
|
||||
{
|
||||
"type": "ellipse",
|
||||
"x": 200,
|
||||
"y": 200,
|
||||
"width": 100,
|
||||
"height": 100,
|
||||
"strokeColor": "transparent",
|
||||
"backgroundColor": "yellow",
|
||||
"strokeWidth": 2
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"x": 300,
|
||||
"y": 250,
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
70,
|
||||
0
|
||||
]
|
||||
],
|
||||
"width": -70,
|
||||
"height": 0,
|
||||
"strokeColor": "yellow",
|
||||
"backgroundColor": "transparent",
|
||||
"strokeWidth": 5
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"x": 293.30127018922195,
|
||||
"y": 275,
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
60.62177826491069,
|
||||
35
|
||||
]
|
||||
],
|
||||
"width": -60.62177826491069,
|
||||
"height": -35,
|
||||
"strokeColor": "yellow",
|
||||
"backgroundColor": "transparent",
|
||||
"strokeWidth": 5
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"x": 275,
|
||||
"y": 293.30127018922195,
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
35,
|
||||
60.62177826491069
|
||||
]
|
||||
],
|
||||
"width": -35,
|
||||
"height": -60.62177826491069,
|
||||
"strokeColor": "yellow",
|
||||
"backgroundColor": "transparent",
|
||||
"strokeWidth": 5
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"x": 250,
|
||||
"y": 300,
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
0,
|
||||
70
|
||||
]
|
||||
],
|
||||
"width": 0,
|
||||
"height": -70,
|
||||
"strokeColor": "yellow",
|
||||
"backgroundColor": "transparent",
|
||||
"strokeWidth": 5
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"x": 225,
|
||||
"y": 293.30127018922195,
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
-34.99999999999997,
|
||||
60.62177826491069
|
||||
]
|
||||
],
|
||||
"width": -34.99999999999997,
|
||||
"height": -60.62177826491069,
|
||||
"strokeColor": "yellow",
|
||||
"backgroundColor": "transparent",
|
||||
"strokeWidth": 5
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"x": 206.69872981077805,
|
||||
"y": 275,
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
-60.62177826491069,
|
||||
35
|
||||
]
|
||||
],
|
||||
"width": -60.62177826491069,
|
||||
"height": -35,
|
||||
"strokeColor": "yellow",
|
||||
"backgroundColor": "transparent",
|
||||
"strokeWidth": 5
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"x": 200,
|
||||
"y": 250,
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
-70,
|
||||
2.842170943040401e-14
|
||||
]
|
||||
],
|
||||
"width": -70,
|
||||
"height": -2.842170943040401e-14,
|
||||
"strokeColor": "yellow",
|
||||
"backgroundColor": "transparent",
|
||||
"strokeWidth": 5
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"x": 206.69872981077805,
|
||||
"y": 225,
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
-60.62177826491069,
|
||||
-34.99999999999997
|
||||
]
|
||||
],
|
||||
"width": -60.62177826491069,
|
||||
"height": -34.99999999999997,
|
||||
"strokeColor": "yellow",
|
||||
"backgroundColor": "transparent",
|
||||
"strokeWidth": 5
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"x": 224.99999999999997,
|
||||
"y": 206.69872981077808,
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
-35.00000000000003,
|
||||
-60.62177826491069
|
||||
]
|
||||
],
|
||||
"width": -35.00000000000003,
|
||||
"height": -60.62177826491069,
|
||||
"strokeColor": "yellow",
|
||||
"backgroundColor": "transparent",
|
||||
"strokeWidth": 5
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"x": 250,
|
||||
"y": 200,
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
-2.842170943040401e-14,
|
||||
-70
|
||||
]
|
||||
],
|
||||
"width": -2.842170943040401e-14,
|
||||
"height": -70,
|
||||
"strokeColor": "yellow",
|
||||
"backgroundColor": "transparent",
|
||||
"strokeWidth": 5
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"x": 275,
|
||||
"y": 206.69872981077808,
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
35,
|
||||
-60.621778264910716
|
||||
]
|
||||
],
|
||||
"width": -35,
|
||||
"height": -60.621778264910716,
|
||||
"strokeColor": "yellow",
|
||||
"backgroundColor": "transparent",
|
||||
"strokeWidth": 5
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"x": 293.3012701892219,
|
||||
"y": 224.99999999999997,
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
60.621778264910745,
|
||||
-35.00000000000003
|
||||
]
|
||||
],
|
||||
"width": -60.621778264910745,
|
||||
"height": -35.00000000000003,
|
||||
"strokeColor": "yellow",
|
||||
"backgroundColor": "transparent",
|
||||
"strokeWidth": 5
|
||||
}
|
||||
]
|
||||
}`;
|
||||
|
||||
async function fetchData(
|
||||
prompt: string,
|
||||
): Promise<readonly NonDeletedExcalidrawElement[]> {
|
||||
const response = await fetch(
|
||||
`http://localhost:3015/v1/ai/text-to-excalidraw/generate`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ prompt }),
|
||||
},
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.error) {
|
||||
alert("Oops!");
|
||||
return [];
|
||||
}
|
||||
|
||||
return convertToExcalidrawElements(result.data);
|
||||
}
|
||||
|
||||
export const TextToExcalidraw = () => {
|
||||
const app = useApp();
|
||||
|
||||
const [prompt, setPrompt] = useState("");
|
||||
const [isPanelOpen, setPanelOpen] = useState(false);
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
const [data, setData] = useState<
|
||||
readonly NonDeletedExcalidrawElement[] | null
|
||||
>(null);
|
||||
|
||||
const [previewCanvas, setPreviewCanvas] = useState<HTMLCanvasElement | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const onClose = () => {
|
||||
app.setOpenDialog(null);
|
||||
};
|
||||
|
||||
const onSubmit = async () => {
|
||||
setPanelOpen(true);
|
||||
setLoading(true);
|
||||
|
||||
const elements = await fetchData(prompt);
|
||||
|
||||
setData(elements);
|
||||
|
||||
const canvas = await exportToCanvas({
|
||||
elements,
|
||||
files: {},
|
||||
exportPadding: DEFAULT_EXPORT_PADDING,
|
||||
});
|
||||
|
||||
await canvasToBlob(canvas);
|
||||
|
||||
setPreviewCanvas(canvas);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const onInsert = async () => {
|
||||
if (data) {
|
||||
app.addElementsFromPasteOrLibrary({
|
||||
elements: data,
|
||||
files: {},
|
||||
position: "center",
|
||||
fitToContent: true,
|
||||
});
|
||||
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (containerRef.current && previewCanvas) {
|
||||
containerRef.current.replaceChildren(previewCanvas);
|
||||
}
|
||||
}, [previewCanvas]);
|
||||
|
||||
// exportToCanvas([], {}, {}, {});
|
||||
// exportToSvg([], {exportBackground}, {}, {})
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "6.5rem",
|
||||
pointerEvents: "auto",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "0.75rem",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="Island"
|
||||
style={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
boxSizing: "border-box",
|
||||
gap: "0.75rem",
|
||||
alignItems: "center",
|
||||
height: 48,
|
||||
padding: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
value={prompt}
|
||||
onChange={(e) => setPrompt(e.target.value)}
|
||||
type="text"
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
height: "100%",
|
||||
boxSizing: "border-box",
|
||||
border: 0,
|
||||
outline: "none",
|
||||
}}
|
||||
placeholder="How can I help you today?"
|
||||
/>
|
||||
<button
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
height: "100%",
|
||||
border: "none",
|
||||
background: "white",
|
||||
aspectRatio: "1/1",
|
||||
padding: 0,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ width: "1.25rem", height: "1.25rem", color: "#1B1B1F" }}
|
||||
>
|
||||
{CloseIcon}
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
style={{ background: "#D6D6D6", width: 1, height: "1.5rem" }}
|
||||
></div>
|
||||
<button
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
height: "100%",
|
||||
border: "none",
|
||||
aspectRatio: "1/1",
|
||||
padding: 0,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#6965DB",
|
||||
borderRadius: "0.5rem",
|
||||
}}
|
||||
onClick={onSubmit}
|
||||
>
|
||||
<div style={{ width: "1.25rem", height: "1.25rem", color: "white" }}>
|
||||
{isLoading ? playerStopFilledIcon : playerPlayIcon}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isPanelOpen && (
|
||||
<div
|
||||
className="Island"
|
||||
style={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
height: 400,
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
>
|
||||
{isLoading ? (
|
||||
"loading"
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={containerRef}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
borderTop: "1px solid #F0EFFF",
|
||||
padding: "0.75rem",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: "0.75rem",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
width: 32,
|
||||
height: "100%",
|
||||
border: "none",
|
||||
aspectRatio: "1/1",
|
||||
padding: 0,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#F5F5F9",
|
||||
borderRadius: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: "1.25rem",
|
||||
height: "1.25rem",
|
||||
color: "#1B1B1F",
|
||||
}}
|
||||
>
|
||||
{RedoIcon}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div style={{ width: 32, height: "100%", display: "flex" }}>
|
||||
<button
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
width: 32,
|
||||
height: "100%",
|
||||
border: "none",
|
||||
aspectRatio: "1/1",
|
||||
padding: 0,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#F5F5F9",
|
||||
borderRadius: "0.5rem 0 0 0.5rem",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: "1.25rem",
|
||||
height: "1.25rem",
|
||||
color: "#1B1B1F",
|
||||
}}
|
||||
>
|
||||
{ZoomOutIcon}
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
width: 32,
|
||||
height: "100%",
|
||||
border: "none",
|
||||
aspectRatio: "1/1",
|
||||
padding: 0,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#F5F5F9",
|
||||
borderRadius: "0 0.5rem 0.5rem 0",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: "1.25rem",
|
||||
height: "1.25rem",
|
||||
color: "#1B1B1F",
|
||||
}}
|
||||
>
|
||||
{ZoomInIcon}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ flexGrow: 1 }}></div>
|
||||
<button
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
height: "100%",
|
||||
border: "none",
|
||||
padding: "0.5rem 1rem",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#6965DB",
|
||||
borderRadius: "0.5rem",
|
||||
color: "white",
|
||||
}}
|
||||
onClick={onInsert}
|
||||
>
|
||||
Insert into scene >
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue