+
+
+
@@ -53,8 +49,7 @@ export const CameraTab = () => {
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
index 20484a6bfd..683b26a353 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
@@ -10,6 +10,7 @@ import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/itemTabs/It
import { Button } from "~/components";
import { faCirclePlus } from "@fortawesome/pro-solid-svg-icons";
import { twMerge } from "tailwind-merge";
+import { TabTitle } from "~/pages/PageEnigma/comps/SidePanelTabs/comps/TabTitle";
import { shapeItems } from "~/pages/PageEnigma/store";
import { GetMediaByUser, GetMediaListResponse } from "~/api/media_files/GetMediaByUser";
import { AssetFilterOption, AssetType, MediaItem } from "~/pages/PageEnigma/models";
@@ -79,27 +80,26 @@ export const ObjectsTab = ({ type }: Props) => {
return (
<>
-
-
+
+
+
@@ -121,8 +119,7 @@ export const ObjectsTab = ({ type }: Props) => {
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ShapeTab.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ShapeTab.tsx
index ed2cabfb75..844053782c 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ShapeTab.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ShapeTab.tsx
@@ -1,19 +1,20 @@
import { useSignals } from "@preact/signals-react/runtime";
import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ItemElements";
import { shapeFilter, shapeItems } from "~/pages/PageEnigma/store";
+import { TabTitle } from "~/pages/PageEnigma/comps/SidePanelTabs/comps/TabTitle";
export const ShapeTab = () => {
useSignals();
return (
- <>
-
Shapes
-
+
);
};
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/ItemPicker.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/ItemPicker.tsx
new file mode 100644
index 0000000000..b38e1db8d8
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/ItemPicker.tsx
@@ -0,0 +1,56 @@
+import { twMerge } from "tailwind-merge";
+import { ArtStyle } from "~/pages/PageEnigma/js/api_manager";
+import { H4 } from "~/components";
+import { ImgHTMLAttributes } from "react";
+
+interface ItemPickerProps extends ImgHTMLAttributes
{
+ label: string;
+ type: ArtStyle;
+ selected: boolean;
+ onSelected: (picked: ArtStyle) => void;
+}
+
+export const ItemPicker = ({
+ label,
+ type,
+ selected = false,
+ onSelected,
+ width,
+ height,
+ ...imgProps
+}: ItemPickerProps) => {
+ const handleSelected = () => {
+ onSelected(type);
+ };
+
+ return (
+
+ );
+};
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/Prompts.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/Prompts.tsx
new file mode 100644
index 0000000000..24a7f14690
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/Prompts.tsx
@@ -0,0 +1,90 @@
+import { ChangeEvent, useContext, useState } from "react";
+
+import { Textarea } from "~/components";
+
+import { EngineContext } from "~/contexts/EngineContext";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faRandom } from "@fortawesome/pro-solid-svg-icons";
+import { RandomTexts } from "~/pages/PageEnigma/constants/RandomTexts";
+
+export const Prompts = () => {
+ const editorEngine = useContext(EngineContext);
+ const [textBufferPositive, setTextBufferPositive] = useState("");
+ const [textBufferNegative, setTextBufferNegative] = useState("");
+
+ const onChangeHandlerNegative = (event: ChangeEvent) => {
+ if (editorEngine == null) {
+ console.log("Editor is null");
+ return;
+ }
+ editorEngine.negative_prompt = event.target.value;
+ setTextBufferNegative(event.target.value);
+ };
+
+ const onChangeHandlerPositive = (event: ChangeEvent) => {
+ if (editorEngine == null) {
+ console.log("Editor is null");
+ return;
+ }
+ editorEngine.positive_prompt = event.target.value;
+ setTextBufferPositive(event.target.value);
+ };
+
+ const generateRandomTextPositive = () => {
+ const randomIndex = Math.floor(Math.random() * RandomTexts.length);
+ const randomText = RandomTexts[randomIndex];
+ setTextBufferPositive(randomText);
+ };
+
+ const generateRandomTextNegative = () => {
+ const randomIndex = Math.floor(Math.random() * RandomTexts.length);
+ const randomText = RandomTexts[randomIndex];
+ setTextBufferNegative(randomText);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {editorState.value === EditorStates.EDIT && (
+ <>
+
+ Render the current camera view with AI
+
+
+
+ )}
+ {editorState.value === EditorStates.PREVIEW && (
+
+ )}
+
+
+
+ When you're done, render your entire animation with AI
+
+
+ (This may take several minutes)
+
+
+
+
+
+
+
+
+ {[...Array(imageRows).keys()].map((_, rowCount) => (
+
+ {styleList
+ .filter((_, index) => index % imageRows === rowCount)
+ .map((style) => (
+
+ ))}
+
+ ))}
+
+
+ {scrollPosition > 0 && (
+
+
+
+ setScrollPosition(
+ Math.max(
+ scrollPosition - Math.max(shownImageCount - 1, 1),
+ 0,
+ ),
+ )
+ }
+ className="pointer-events-auto h-6 w-6 rounded-full bg-white/80 text-gray-800/75 hover:bg-white/100 hover:text-gray-800"
+ />
+
+
+ )}
+ {scrollPosition < maxWidth - shownImageCount && (
+
+
+
+ setScrollPosition(
+ Math.min(
+ scrollPosition + Math.max(shownImageCount - 1, 1),
+ maxWidth - shownImageCount,
+ ),
+ )
+ }
+ className="pointer-events-auto h-6 w-6 rounded-full bg-white/80 text-gray-800/75 hover:bg-white/100 hover:text-gray-800"
+ />
+
+
+ )}
+
+
+