Merge pull request #227 from rewbs/raw-schedule-export

Add new section for raw schedule export, so you can use schedules in ComfyUI (via FizzleDorf's schedule nodes), or just paste them directly in Deforum

src/ParseqUI.js

@@ -29,6 +29,7 @@ import SupportParseq from './components/SupportParseq'
 import { UserAuthContextProvider } from "./UserAuthContext";
 import { AudioWaveform } from './components/AudioWaveform';
 import { ExpandableSection } from './components/ExpandableSection';
+import RawSchedules from './components/RawSchedules'
 import { FieldSelector } from "./components/FieldSelector";
 import { InitialisationStatus } from "./components/InitialisationStatus";
 import { AddKeyframesDialog, BulkEditDialog, DeleteKeyframesDialog, MergeKeyframesDialog } from './components/KeyframeDialogs';
@@ -1334,6 +1335,15 @@ const ParseqUI = (props) => {
   }, [displayedFields, showFlatSparklines, renderedData, managedFields, handleClickedSparkline, sparklineData, theme]);
 
 
+  // Raw Schedules ------------------------
+
+  const rawSchedules = useMemo(() => {
+    return renderedData
+      ? <RawSchedules  renderedData={renderedData} managedFields={managedFields} />
+      : <></>;
+
+  }, [renderedData, managedFields]);
+
 
   // Raw output ------------------------
 
@@ -1699,6 +1709,13 @@ const ParseqUI = (props) => {
         </ExpandableSection>
       </Grid>
       <React.StrictMode>
+      <Grid xs={12}>
+        <ExpandableSection title="Raw schedules">
+          <Box>
+            {rawSchedules}
+          </Box>
+        </ExpandableSection>
+      </Grid>        
       <Grid xs={12}>
         <ExpandableSection title="Output">
           <Box>

src/components/KeyframeDialogs.tsx

@@ -471,6 +471,7 @@ export const BulkEditDialog: FC<BulkEditDialogProps> = ({
                             timeSeries: timeSeries,
                             variableMap: new Map([['prev_computed_value', 0]]),
                             computed_values: [],
+                            cadence: 1,
                         }
                         parse(newValue).invoke(dummyContext);
                     } catch (e: any) {

src/components/ParseqGrid.tsx

@@ -208,7 +208,7 @@ export const ParseqGrid = forwardRef(({ rangeSelection, onSelectRange, onGridRea
                   && !isValidNumber(params.data[field])
                   && renderedData
                   && renderedData.rendered_frames
-                  ) {
+                  && renderedData.rendered_frames[frame]) {
               const renderedValue = renderedData.rendered_frames[frame][field];
               return isValidNumber(renderedValue) ? `(${renderedValue})` : '';
             } else {

src/components/RawSchedules.tsx

@@ -0,0 +1,84 @@
+import { MenuItem, Stack, TextField, Typography } from '@mui/material';
+import * as React from 'react';
+import { useState } from 'react';
+import { RenderedData } from '../ParseqUI';
+
+type RawSchedulesProps = {
+  renderedData: RenderedData;
+  managedFields: string[];
+}
+
+export default function RawSchedules({ renderedData, managedFields }: RawSchedulesProps) {
+
+  const [selectedField, setSelectedField] = useState<string>(managedFields ? managedFields[0] : '');
+  const [variant, setVariant] = useState<'delta' | 'absolute'>('delta');
+
+
+  const rawSchedule = React.useMemo(() => {
+
+    if (['Prompt', 'PositivePrompt', 'NegativePrompt'].includes(selectedField))  {
+      return renderedData?.rendered_frames
+      ?.map(frame => {
+        const fullPrompt = frame['deforum_prompt'];
+        const promptPiece = selectedField === 'Prompt' ? fullPrompt
+          : selectedField === 'PositivePrompt' ? fullPrompt.split('--neg')[0]
+            : fullPrompt.split('--neg')[1];
+        return `"${frame['frame']}": "${promptPiece}"`
+      })
+      ?.join(",\n");
+    } else {
+      return renderedData?.rendered_frames
+      ?.map(frame => `${frame['frame']}: (${frame[selectedField + (variant === 'delta' ? '_delta' : '')]})`)
+      ?.join(', ');
+    }
+
+  }, [renderedData, selectedField, variant]);
+
+  return (
+    <Stack>
+      <Stack direction={'row'} gap={1}>
+        <TextField
+          label="Field"
+          InputLabelProps={{ shrink: true, }}
+          InputProps={{ style: { width: "20em", fontSize: '0.75em' } }}
+          value={selectedField}
+          onChange={(e) => setSelectedField(e.target.value)}
+          select
+          size='small'
+        >
+          {managedFields?.map(f => <MenuItem value={f}>{f}</MenuItem>)}
+          <MenuItem value="Prompt">Full prompt</MenuItem>
+          <MenuItem value="PositivePrompt">Positive prompt</MenuItem>
+          <MenuItem value="NegativePrompt">Negative prompt</MenuItem>
+        </TextField>
+        <TextField
+          label="Variant"
+          InputLabelProps={{ shrink: true, }}
+          InputProps={{ style: { width: "20em", fontSize: '0.75em' } }}
+          value={variant}
+          onChange={(e) => setVariant(e.target.value as 'delta' | 'absolute')}
+          select
+          size='small'
+        >
+          <MenuItem value="delta">Delta values</MenuItem>
+          <MenuItem value="absolute">Absolute values</MenuItem>
+        </TextField>
+      </Stack>
+      {rawSchedule && selectedField && <TextField
+        style={{ width: '100%' }}
+        multiline
+        onFocus={event => event.target.select()}
+        rows={4}
+        InputProps={{ style: { fontFamily: 'Monospace', fontSize: '0.75em' } }}
+        value={rawSchedule}
+        variant="filled"
+      />
+      }
+      <Typography fontSize="0.75em" paddingBottom={"5px"}>
+        You use this schedule directly in Deforum, or in ComfyUI using  <a href="https://github.com/FizzleDorf/ComfyUI_FizzNodes">FizzNodes</a>.
+      </Typography>
+
+    </Stack>
+
+  );
+}