Midjourney Display is a cutting-edge, web-based gallery that offers a compelling array of AI-generated images 🤖🎭. Dive into the amazing world of AI creativity with our dynamic and lively platform!
Please note: Full functionality of Midjourney Display requires an active subscription to Midjourney.
We're ecstatic to present a remarkable update to our application – the Live Viewing feature! Now, watch as your Midjourney AI images evolve in real-time during their generation. This interactive feature elevates your user experience, offering a sneak peek into the real-time creative process of the AI. It feels like embarking on a shared artistic journey with the AI!
But wait, there's more! We're delighted to announce that GPT-3.5 is on the horizon! This upgrade aims to improve your prompts and allows you to generate content directly within the app using AI. Furthermore, it will empower you to remix images from the AI Gallery into new prompts. Keep an eye out for these exciting enhancements!
Before you start this setup journey, ensure that you have:
- An active subscription to Midjourney.
- Node.js 🟩 (version 12.0.0 or higher) installed.
- An account on Discord 🎙️.
- Basic knowledge of JavaScript ☕ and React ⚛️.
Start by cloning this repository to your local machine using Git. Run the following command:
git clone https://github.com/yourusername/midjourney-display.git
Then, move into the project directory and install the necessary dependencies with npm. Important: Due to a dependency conflict with react-image-lightbox
, use the --legacy-peer-deps
flag:
cd midjourney-display
npm install --legacy-peer-deps
Follow these steps to set up a new Discord bot:
- Visit the Discord Developer Portal and log in to your account.
- Click "New Application", provide a name and confirm by clicking "Create".
- Go to the "Bot" tab and click "Add Bot". Confirm by clicking "Yes, do it!".
- Under the "Token" section, click "Copy" to get your bot's token. Keep this token safe as it will be used in the next step.
Now, you need to invite the bot to your server:
- Visit the 'OAuth2' tab in your bot's application page.
- Check the 'bot' box in the 'scopes' section.
- In the 'Bot Permissions' section, select 'Administrator'.
- A URL will be generated at the bottom of the scopes section, copy this URL.
- Paste this URL into a new browser tab and select your server.
- Click 'Authorize', and your bot should now be in your server.
Obtain OpenAI API Key 🗝️ To get your OpenAI API Key, follow the steps below:
- Create an account or log in to your existing account on OpenAI.
- Navigate to the API section in the dashboard.
- Here you will find your API Key. Be careful to keep this secret.
Now that you have your OpenAI API Key, you can use it in your .env file.
Create a .env
file in the root of your project. This file will hold environment variables, including the Discord bot token, OpenAI API key, and the IDs for the server, channel, and session.
Your .env
file should look like this:
SALAI_TOKEN=<your-token>
BOT_TOKEN=<your-bot-token>
OPENAI_API_KEY=<your-openai-api-key>
CHANNEL_ID=<your-channel-id>
SERVER_ID=<your-server-id>
SESSION_ID=<your-session-id>
Replace <your-bot-token>
with the token obtained from the Discord Developer Portal. <your-openai-api-key>
should be replaced with your OpenAI API key. The <your-channel-id>
, <your-server-id>
, and <your-session-id>
should be replaced with the respective IDs from your Discord server.
Now, run the app using the following command:
npm run dev
Open localhost:3000
in your browser to witness the stunning Midjourney Display!
We have fresh updates in the Beta branch, including:
- Download Image 📥
- Fast Reload ⚡
- Prompt text of images 📃
Check out the Beta branch to explore these new features!
We'd love to see the following enhancements and additions to Midjourney Display:
- Login/Auth system 🛂: A secure method for users to access the platform.
- Database Integration 🗄️: For efficient management of the AI-generated images.
- Improved Loading Experience 🔄: Enhance the user experience by making the loading process seamless.
- Tailwind Integration 💨: To refine the UI and make it more efficient.
We're open-sourcing this project to collaborate and create an exceptional platform. Join us in shaping the future of AI creativity!
We appreciate contributions that can make this display even more spectacular! We warmly welcome changes from the community. If you wish to contribute, please fork this repository, make your changes, and submit a pull request.
This project is licensed under the MIT License. More details can be found in the LICENSE file.