Okay, here’s my blog post about my experience building a Flux Prompt Generator. Hope you find it useful!
Alright folks, buckle up! Today I’m sharing my little weekend project: a Flux Prompt Generator. It’s not gonna win any design awards, but it gets the job done, and I learned a ton along the way.
The Problem: I was constantly struggling to come up with good prompts for my AI art experiments. I’d stare at the screen, brain completely blank. Sound familiar? I figured, “Hey, why not build something to kickstart the process?”
The Idea: A super simple web app where you hit a button, and BOOM, a random prompt pops up. Nothing fancy, just a quick and dirty way to spark some creativity.
The Tech Stack (aka What I Actually Used):
- React (because I’m somewhat familiar with it)
- JavaScript (duh)
- A text file with a bunch of prompt snippets (the heart of the operation!)
Let’s Get Building!
Step 1: The Prompt List. I started by creating a plain text file, `*`. This was basically a brain dump of adjectives, nouns, art styles, and random concepts. Think “A cyberpunk cityscape,” “A watercolor painting of a grumpy cat,” “A low-poly rendering of a forgotten temple,” you get the idea. I just kept adding stuff as it came to me.
Step 2: React Setup. Fired up my terminal and used `create-react-app` to get a basic React project going. Deleted all the boilerplate stuff in `src/*` and started from a clean slate.
Step 3: Reading the Text File. This was trickier than I thought! Turns out, reading local files directly in the browser is a bit of a security headache. Ended up using the `fetch` API to grab the `*` file and then parse it. Here’s the gist of the code:
useEffect(() => {
fetch('*')
.then(response => *())
.then(text => {
// Split the text into an array of prompts
const promptArray = *('n');
setPrompts(promptArray);
}, []);
Basically, this code runs when the component first loads. It fetches the text file, splits it into an array (where each line is a separate prompt), and then stores that array in the component’s state using `useState`. I called that state variable `prompts`.
Step 4: The Random Prompt Generator. Okay, now for the fun part! I created a function to pick a random prompt from the `prompts` array. Super simple:
const getRandomPrompt = () => {
if (* > 0) {
const randomIndex = *(*() *);
setDisplayedPrompt(prompts[randomIndex]);
This function checks if we actually have any prompts (to avoid errors if the file hasn’t loaded yet). Then, it generates a random index and sets the `displayedPrompt` state variable to the prompt at that index. I used `useState` again for `displayedPrompt`.
Step 5: The Button! Added a button to my JSX that calls the `getRandomPrompt` function when clicked. Something like this:
<button onClick={getRandomPrompt}>Generate Prompt</button>
Step 6: Displaying the Prompt. Finally, I just displayed the `displayedPrompt` in a paragraph tag:
<p>{displayedPrompt}</p>
The Result:
It’s ugly, but it works! I have a button. I click it. A random prompt shows up. Boom!
Things I Learned:
- Reading local files in the browser requires a bit of a workaround (hello `fetch`!).
- React `useState` is my friend.
- Even a super simple project can be surprisingly satisfying.
Next Steps:
- Make it look less terrible (CSS, here I come!).
- Add the ability to save favorite prompts.
- Maybe even integrate with a real AI art API directly!
In Conclusion:
This little Flux Prompt Generator is a testament to the power of “just getting started.” It’s not perfect, but it’s mine, and it’s helping me break through those creative blocks. Maybe it can help you too! Go build something!