@pollinations/react - Generative AI Playground

This project showcases a React component that demonstrates the usage of Pollinations.ai's generative AI hooks for text, image, and chat generation.

Features

• Text generation using usePollinationsText
• Image generation using usePollinationsImage
• Chat interaction using usePollinationsChat
• Interactive UI with real-time previews
• Code snippets for each generation method
• Customizable parameters (seed, model, dimensions for images)

Installation

Follow the steps below to install and run the project:

1. Clone this repository:

   git clone https://github.com/diogo-karma/pollinations-react-doc
   cd pollinations-react-doc

2. Install the necessary dependencies:

   npm install
   # or
   yarn install

3. Run the development server:

   npm run dev
   # or
   yarn dev

4. Open the application: Navigate to http://localhost:3000 in your browser to see the app in action.

Usage

The Pollinations Playground component provides three main tabs:

1. Text Generation: Enter a prompt and generate text using various models.
2. Image Generation: Create images based on text prompts with customizable dimensions.
3. Chat Interaction: Engage in a conversation with an AI assistant.

Each tab includes a code snippet demonstrating how to use the respective Pollinations hook in your own projects.

Dependencies

This project relies on the following technologies:

• React
• Next.js
• Tailwind CSS
• @pollinations/react (for AI generation hooks)
• Various UI components (@/components/ui/*)

Contributing

Contributions are welcome! Feel free to fork this repository, make your changes, and submit a Pull Request.

License

This project is open-source and available under the MIT License.

---

Features

• Real-time Component Previews: Instantly see the effects of your changes with live previews.
• Responsive Design: Optimized for desktop, tablet, and mobile devices.
• Dynamic Model Updates: Fetch and update available models in real-time.
• Effortless Copy & Paste: Copy code snippets with one click for quick testing.

TODO

• Real-time updates for available models.
• Model selection for text generation.
• Image size selection.
• Seed selection options.
• Model selection for image generation.
• "Copy Code" button.
• Markdown rendering for better visualization.
• Documentation for hooks.
• Preview functionality in the hooks documentation.
• Add onChange functionality with debounce.
• Document all parameters for components and hooks.
• Loading indicators for asynchronous actions.
• Enhance documentation for all possible parameters.
• Integrate Pollinations.ai’s visual CSS styling pattern into the docs.

---

💡 Learn More

• Explore the Pollinations Generative React Hooks & Components on npm.
• Try the Chatbot example to experience more features.
• Check out the Storytelling example for creative uses.
• Learn more about Pollinations at Pollinations.ai.

Made with ❤️ by the Pollinations.ai Team & Karma.yt