Add first Patreon supporters to README and UI.

README.md

@@ -41,7 +41,7 @@
 - [Working with large number of frames (performance tips)](#working-with-large-number-of-frames-performance-tips)
 - [Development & running locally](#development--running-locally)
  - [Deployment](#deployment)
-- [Credits](#credits)
+- [Credits and support](#credits)
 
 ## What is this?
 
@@ -88,17 +88,17 @@ The best way to get your head around Parseq's capabilities and core concepts is
 |--- |--- |---
 | [<img width=400 src="https://i.ytimg.com/vi/MXRjTOE2v64/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&amp;rs=AOn4CLBBgRv91gM-WNI2mlJMZbWXmyyMZg">](https://www.youtube.com/watch?v=MXRjTOE2v64) | [<img width=400 src="https://i.ytimg.com/vi/PvWckT0Pik8/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLD7_8Aw9Coj6G7_0RWrSLEqStvamA">](https://www.youtube.com/watch?v=PvWckT0Pik8)  | [<img width=400 src="https://i.ytimg.com/vi/M6Z-kD2HnDQ/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDZX4Xf6a_FNCBZCkfaYLmHyS1q6A">](https://www.youtube.com/watch?v=M6Z-kD2HnDQ)	|
 
-### Usage overview
+## Usage
 
-In summary, your workflow with Parseq involves 2 main steps:
+In summary, there are 2 steps to perform:
 
-### Step 1: Create your parameter manifest
+#### Step 1: Create your parameter manifest
 
 * Go to https://sd-parseq.web.app/ (or run the UI yourself from this repo with `npm start`)
 * Edit the table at the top to specify your keyframes and parameter values at those keyframes. See below for more information about what you can do here.
 * Copy the contents of the "Output" textbox at the bottom. If you are signed in (via the button at the top right), you can choose to upload the output instead, and then copy the resulting URL. All subsequent changes will be pushed to the same URL, so you won't need to copy & paste again.
 
-### Step 2: Generate the video
+#### Step 2: Generate the video
 
 * Head to the SD web UI go to the Deforum tab and then the Init tab.
 * Paste the JSON or URL you copied in step 1 into the Parseq section at the bottom of the page.
@@ -674,14 +674,17 @@ firebase hosting:clone sd-parseq:staging sd-parseq:live
 
 ## Credits
 
-This script includes ideas and code sourced from many other scripts. Thanks in particular to the following sources of inspiration:
+This script includes ideas and code sourced from many other scripts. Thanks in particular to the following sources of support and inspiration:
 
-* Everyone behind Deforum: https://github.com/deforum-art/
+* Everyone supporting [Parseq on Patreon](https://www.patreon.com/rewbs), including: Adam Sinclair and MJ.
+* Everyone who has [bought me a coffee](https://www.buymeacoffee.com/rewbs)!
+* Everyone who has contributed to the [A1111 web UI](https://github.com/AUTOMATIC1111/stable-diffusion-webui)
+* Everyone who has contributed to [Deforum](https://github.com/deforum-art/)
 * Everyone trying out Parseq and giving me feedback on Discrod (e.g. ronnykhalil, Michael L, Moistlicks, Kingpin, hithere, kabachuha, AndyXR, Akumetsu971, koshi...)
-* Everyone who has [bought me a coffee](https://www.buymeacoffee.com/rewbs)! :)
 * Everyone behind [Aubio](https://aubio.org/), [AubioJS](https://github.com/qiuxiang/aubiojs), [Wavesurfer](https://wavesurfer-js.org/),  [react-timeline-editor](https://github.com/xzdarcy/react-timeline-editor), [ag-grid](https://www.ag-grid.com/) (community edition), p5, chart.js and recharts.
-* Filarus for their vid2vid script: https://github.com/Filarius/stable-diffusion-webui/blob/master/scripts/vid2vid.py .  
-* Animator-Anon for their animation script: https://github.com/Animator-Anon/Animator/blob/main/animation.py . I picked up some good ideas from this.
-* Yownas for their seed travelling script: https://github.com/yownas/seed_travel.
-* feffy380 for the prompt-morph script https://github.com/feffy380/prompt-morph
-* eborboihuc for the clear implementation of 3d rotations using `cv2.warpPerspective()`:  https://github.com/eborboihuc/rotate_3d/blob/master/image_transformer.py
+* The following scripts and their authors from whom I picked up some good ideas when I was starting out:
+   * Filarus for their [vid2vid script](https://github.com/Filarius/stable-diffusion-webui/blob/master/scripts/vid2vid.py).  
+   * Animator-Anon for their [animation script](https://github.com/Animator-Anon/Animator/blob/main/animation.py). 
+   * Yownas for their [seed travelling script](https://github.com/yownas/seed_travel)
+   * feffy380 for the [prompt-morph script](https://github.com/feffy380/prompt-morph)
+   * eborboihuc for the [clear implementation of 3d rotations using `cv2.warpPerspective()`](https://github.com/eborboihuc/rotate_3d/blob/master/image_transformer.py)

package.json

@@ -61,6 +61,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.12.1",
     "react-scripts": "5.0.1",
+    "react-slideshow-image": "^4.2.1",
     "react-sparklines-typescript-v2": "^1.3.6",
     "react-time-ago": "^7.2.1",
     "react-use": "^17.4.0",

src/ParseqUI.js

@@ -1325,7 +1325,7 @@ const ParseqUI = (props) => {
           borderBottom: 'var(--Grid-borderWidth) solid',
           borderColor: 'divider',
         }}>
-        <Stack width={'100%'} direction="row" spacing={1} flex='flex-grow' flexGrow={4} alignItems={'flex-start'} justifyContent={'right'}>
+        <Stack width={'100%'} direction="row" spacing={1} flex='flex-grow' fullWidth flexGrow={4} alignItems={'flex-start'}>
           <SupportParseq />
         </Stack>
       </Grid>

src/components/SupportParseq.tsx

@@ -2,38 +2,45 @@ import { faPatreon } from '@fortawesome/free-brands-svg-icons';
 import { faCoffee } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Chip, Stack, Typography } from '@mui/material';
-import { useEffect, useState } from 'react';
+import { Fade } from 'react-slideshow-image';
+import 'react-slideshow-image/dist/styles.css'
 import { supporterList } from '../data/supporterList';
+import _ from 'lodash';
 
-const Supporters = () => {
-
-    const [currentSupporter, setCurrentSupporter] = useState(Math.floor(Math.random() * supporterList.length));
-
-    useEffect(() => {
-        setInterval(() => {
-            setCurrentSupporter(Math.floor(Math.random() * supporterList.length));
-        }, 30000);
-    }, []);
 
-    return <Typography fontSize='0.75em'>
-        <a href={supporterList[currentSupporter].link}>{supporterList[currentSupporter].name}</a>
-    </Typography>
+const Supporters = () => {
+    return (
+        <div className="slide-container" style={{paddingBottom:'0.25em' }}>
+          <Fade  duration={10000} arrows={false} >
+           { _.shuffle(supporterList).map((supporter, index)=> (
+              <div key={index}>
+                <Typography fontWeight={'bold'} fontSize='0.75em'> { supporter.link ? <a target='_blank' rel="noreferrer" href={supporter.link}>{supporter.name}</a> : supporter.name } </Typography>
+              </div>
+            ))} 
+          </Fade>
+        </div>
+      )
 }
 
 
 export default function SupportParseq() {
 
-    return <Stack>
-        <Stack direction={'row'} justifyContent={'flex-end'}>
+    return <Stack direction={'column'} sx={{ width:'100%'}}>
+        <Stack direction={'column'}>
+            <center> {/*lol*/}
+                <Typography fontSize='0.75em'>
+                    Thank you to our <em>Oscillator</em> level supporter:
+                </Typography>
+                <Supporters />
+            </center>
+        </Stack >
+        <Stack direction={'row'} justifyContent={'flex-end'} alignItems={'center'}>
             <Typography fontSize='0.75em'>
                 Support Parseq:&nbsp;
             </Typography>
-            <Chip style={{ paddingLeft: '4px' }} size='small' variant="filled" component="a" href="https://www.buymeacoffee.com/rewbs" clickable icon={<FontAwesomeIcon color='#C4A484' size='2xs' icon={faCoffee} />} label="Coffee" />
+            <Chip style={{ paddingLeft: '4px' }} size='small' variant="filled" component="a" target='_blank' rel="noreferrer" href="https://www.buymeacoffee.com/rewbs" clickable icon={<FontAwesomeIcon color='#C4A484' size='2xs' icon={faCoffee} />} label="Coffee" />
             &nbsp;/&nbsp;
-            <Chip style={{ paddingLeft: '4px' }} size='small' variant="filled" component="a" href="https://www.patreon.com/rewbs" clickable icon={<FontAwesomeIcon color='#f1465a' size='2xs' icon={faPatreon} />} label="Patreon" />
-        </Stack>
-        <Stack direction={'row'} justifyContent={'flex-end'}>
-            <Supporters />
-        </Stack >
+            <Chip style={{ paddingLeft: '4px' }} size='small' variant="filled" component="a" target='_blank' rel="noreferrer" href="https://www.patreon.com/rewbs" clickable icon={<FontAwesomeIcon color='#f1465a' size='2xs' icon={faPatreon} />} label="Patreon" />
+        </Stack>        
     </Stack>;
 }

src/data/supporterList.ts

@@ -1,4 +1,5 @@
 export const supporterList = [
-    { name: 'Your name here? Click to find out more. :)', link: 'https://www.patreon.com/rewbs' },
-    { name: 'Patreon supporters can a link to their art here!', link: 'https://www.patreon.com/rewbs' }
+    { name: '(Your name here? Click to find out more. :) )', link: 'https://www.patreon.com/rewbs' },
+    { name: 'Adam Sinclair', link: '' },
+    { name: 'MJ', link: '' },
 ]