41 |
44 |
46 | ) : (
47 |
50 |
52 |
54 | 13 | 14 | 18 | https://github.com/AUTOMATIC1111/stable-diffusion-webui 19 | 20 | 21 |
22 |
23 | Make sure: 24 |
-
26 |
-
27 | stable-diffusion-webui is running with command{" "}
28 |
29 | 30 | {" "} 31 | --cors-allow-origins "*" 32 | 33 | 34 | for example: 35 |./webui.sh --cors-allow-origins "*" 36 |
37 |
38 | - this not running on Safari 39 |
42 |
{
32 | setSelectedImageLogItem(image);
33 | }}
34 | >
35 |
45 |
52 |
53 | ))}
54 | {
54 | setSelectedImage(image);
55 | }}
56 | >
57 |
66 |
68 |
69 | ))}
70 |
75 |
115 | );
116 | }
117 |
--------------------------------------------------------------------------------
/src/Editor/Lyrics/LyricPreview/LyricsTextView.tsx:
--------------------------------------------------------------------------------
1 | import { KonvaEventObject } from "konva/lib/Node";
2 | import { Text as KonvaText } from "react-konva";
3 | import { useEffect, useState } from "react";
4 | import { useEditorStore } from "../../store";
5 | import {
6 | DEFAULT_TEXT_PREVIEW_HEIGHT,
7 | DEFAULT_TEXT_PREVIEW_WIDTH,
8 | LyricText,
9 | } from "../../types";
10 | import { EditableTextInput } from "./EditableTextInput";
11 | import { ResizableText } from "./ResizableText";
12 | import { rgbToRgbaString } from "../../AudioTimeline/Tools/CustomizationSettingRow";
13 |
14 | const RETURN_KEY = 13;
15 | const ESCAPE_KEY = 27;
16 |
17 | export interface LyricsTextViewProps
18 | extends React.ComponentProps
84 |
89 | {lyricTexts.map((lyric, index) => (
90 | (lyricRefs.current[index] = el)}
93 | style={{
94 | fontFamily: "Inter Variable",
95 | padding: calculatePadding(width, height),
96 | fontSize: calculateFontSize(width, height) + "px",
97 | fontWeight: "bolder",
98 | backgroundColor: "transparent",
99 | marginBottom: "20px",
100 | }}
101 | animate={{
102 | color:
103 | currentLyricIndex === index
104 | ? "rgba(255, 255, 255, 1)"
105 | : "rgba(255, 255, 255, 0.35)",
106 | }}
107 | transition={{ duration: 0.5 }}
108 | >
109 | {lyric.text}
110 |
111 | ))}
112 |
113 |
114 |
132 |
150 | );
151 | }
152 |
--------------------------------------------------------------------------------
/src/Editor/Lyrics/LyricsView.css:
--------------------------------------------------------------------------------
1 | div.DraftEditor-root {
2 | /* background-color: #252525; */
3 | /* width:80%; */
4 | margin: auto;
5 | max-height: inherit;
6 | overflow-y: auto;
7 | padding: 20px;
8 | font-size: 18px;
9 | /* font-family: "calibri", sans-serif; */
10 | text-align: left;
11 | font-size: 12pt;
12 | }
13 |
--------------------------------------------------------------------------------
/src/Editor/MediaContentSidePanel.tsx:
--------------------------------------------------------------------------------
1 | import { TabList, Item, Tabs, View } from "@adobe/react-spectrum";
2 | import { useProjectStore } from "../Project/store";
3 | import LyricReferenceView from "./Lyrics/LyricReferenceView";
4 | import { useState } from "react";
5 | import Images from "@spectrum-icons/workflow/Images";
6 | import Note from "@spectrum-icons/workflow/Note";
7 | import ImagesManagerView from "./Image/Imported/ImagesManagerView";
8 |
9 | export default function MediaContentSidePanel({
10 | maxRowHeight,
11 | containerWidth,
12 | }: {
13 | maxRowHeight: number;
14 | containerWidth: number;
15 | }) {
16 | const editingProject = useProjectStore((state) => state.editingProject);
17 | const lyricReference = useProjectStore((state) => state.lyricReference);
18 | const [tabId, setTabId] = useState<"lyrics" | "images">("lyrics");
19 |
20 | return (
21 |
146 |
148 | )}
149 |
122 |
141 |
196 |
197 |
123 |
128 |
133 |
134 |
149 |
195 |
157 |
164 |
175 | {existingProjects.map((p) => (
176 |
185 |
186 |
193 |
194 | {project.projectDetail.name}
39 | {
169 | clearInterval(timer.current);
170 | setIsOverlayHidden(true);
171 | }}
172 | onMouseMove={() => {
173 | setIsOverlayHidden(false);
174 | clearInterval(timer.current);
175 | timer.current = setInterval(() => {
176 | setIsOverlayHidden(true);
177 | }, DELAY * 1000);
178 | }}
179 | >
180 |
191 |
199 |
201 |
209 |
211 |
220 | togglePlayPause()}
223 | />
224 |
225 |
236 | {projectDetail.name}
237 |
238 |
247 | {
256 | seek(value);
257 | }}
258 | />
259 |
260 |
270 | {formatDuration((percentComplete / 100) * duration * 1000)}
271 |
272 |
282 | -{formatDuration((1 - percentComplete / 100) * duration * 1000)}
283 |
284 |
285 |
286 | );
287 | }
288 |
--------------------------------------------------------------------------------
/src/Project/LoadProjectListButton.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ActionButton,
3 | AlertDialog,
4 | Button,
5 | ButtonGroup,
6 | Content,
7 | Dialog,
8 | DialogTrigger,
9 | Divider,
10 | Heading,
11 | View,
12 | } from "@adobe/react-spectrum";
13 | import { useEffect, useState } from "react";
14 | import { useDropzone } from "react-dropzone";
15 | import { useAIImageGeneratorStore } from "../Editor/Image/AI/store";
16 | import DeleteProjectButton from "./DeleteProjectButton";
17 | import ProjectList from "./ProjectList";
18 | import { loadProjects, useProjectStore } from "./store";
19 | import { Project, ProjectDetail } from "./types";
20 |
21 | export default function LoadProjectListButton({
22 | hideButton = false,
23 | }: {
24 | hideButton?: boolean;
25 | }) {
26 | const { acceptedFiles, getRootProps, getInputProps, open } = useDropzone();
27 |
28 | const setExistingProjects = useProjectStore(
29 | (state) => state.setExistingProjects
30 | );
31 | const setEditingProject = useProjectStore((state) => state.setEditingProject);
32 | const setIsPopupOpen = useProjectStore((state) => state.setIsPopupOpen);
33 | const isLoadProjectPopupOpen = useProjectStore(
34 | (state) => state.isLoadProjectPopupOpen
35 | );
36 | const setIsLoadProjectPopupOpen = useProjectStore(
37 | (state) => state.setIsLoadProjectPopupOpen
38 | );
39 | const setLyricTexts = useProjectStore((state) => state.updateLyricTexts);
40 | const setLyricReference = useProjectStore((state) => state.setLyricReference);
41 | const setUnsavedLyricReference = useProjectStore(
42 | (state) => state.setUnsavedLyricReference
43 | );
44 | const setImages = useProjectStore((state) => state.setImages);
45 | const setPromptLog = useAIImageGeneratorStore((state) => state.setPromptLog);
46 | const setGeneratedImageLog = useAIImageGeneratorStore(
47 | (state) => state.setGeneratedImageLog
48 | );
49 | const resetImageStore = useAIImageGeneratorStore((state) => state.reset);
50 |
51 | const [selectedProject, setSelectedProject] = useState
26 |
36 |
42 |
43 | {project.projectDetail.albumArtSrc ? (
44 |
45 | 
57 |
58 | ) : null}
59 |
60 |
61 | {project.projectDetail.name}
62 |
63 |
64 |
65 |
66 | by Lyrictor
67 |
68 |
69 |
70 |
71 | );
72 | }
73 |
--------------------------------------------------------------------------------
/src/Project/ProjectList.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Cell,
3 | Column,
4 | Row,
5 | TableBody,
6 | TableHeader,
7 | TableView,
8 | Text,
9 | } from "@adobe/react-spectrum";
10 | import { useProjectStore } from "./store";
11 | import { Project } from "./types";
12 |
13 | export default function ProjectList({
14 | onSelectionChange,
15 | }: {
16 | onSelectionChange: (project?: Project) => void;
17 | }) {
18 | const existingProjects = useProjectStore((state) => state.existingProjects);
19 |
20 | if (existingProjects.length === 0) {
21 | return