Ibis

Ibis is a Hands-Free Multimedia Interface powered by the latest generative AI technologies. Transform any webpage into an intuitive, voice-controlled interface with zero learning curve.

---

📖 Table of Contents

• About Ibis
• Features
• Demo
• Installation
• Usage
• Contributing
• License
• Acknowledgments

---

🦜 About Ibis

Ibis is designed to revolutionize the way we interact with web pages by eliminating the need for traditional interfaces like keyboards and mouse clicks. Inspired by the vision of seamless human-computer interaction, Ibis leverages OpenAI-compatible endpoints to provide a hands-free, voice-controlled web development and design experience.

With over 30 years of full-stack web development experience, I created Ibis to streamline the web development process, allowing you to code, design, and iterate on web applications effortlessly using just your voice.

---

🌟 Features

• Hands-Free Control: Navigate and manipulate web pages using voice commands.
• AI-Powered Development: Generate and refine JavaScript code dynamically without touching the keyboard.
• Local LLM Compatibility: Easily switch between OpenAI servers and local language models using the llmServer variable.
• Progress Indicators: Sleek, full-width progress bars to keep track of ongoing tasks.
• Speech Synthesis Queue: Seamlessly queue multiple speech outputs without interruptions.
• Self-Contained & Open Source: Fully client-side application with no server dependencies. Contribute on GitHub.

---

🎥 Demo

Check out our live demo to experience Ibis in action!

Ibis Demo

---

🚀 Installation

1. Clone the Repository:

   git clone https://github.com/lks-ai/ibis.git

2. Navigate to the Project Directory:

   cd ibis

3. Open the Application:
   • Simply open the index.html file in your preferred web browser.
   • Alternatively, use a local development server for enhanced performance:

     npx http-server

     Then navigate to http://localhost:8080 in your browser.

---

🛠️ Usage

1. Enter Your OpenAI API Key:

   • Upon launching Ibis, you'll be prompted to enter your OpenAI API key.
   • Note: In future updates, support for local LLMs will be available by setting the llmServer parameter.

2. Start Hands-Free Mode:

   • Click the 🎤 microphone button to activate voice control.
   • Begin issuing voice commands to manipulate and develop your web page.

3. Generate Content:

   • Use natural language commands to create or modify elements on the page.
   • Example:
     • "Add a red button with the text 'Click Me'."
     • "Change the background color to light blue."

4. View Progress:

   • Monitor ongoing tasks with the sleek progress bar at the bottom of the screen.

5. Access Speech Feedback:

   • Listen to real-time feedback and updates via the integrated speech synthesis.

---

More Screenies

---

🤝 Contributing

Contributions are welcome! Whether you're fixing bugs, improving documentation, or adding new features, your help is appreciated.

1. Fork the Repository
2. Create a Feature Branch

   git checkout -b feature/YourFeature

3. Commit Your Changes

   git commit -m "Add YourFeature"

4. Push to the Branch

   git push origin feature/YourFeature

5. Open a Pull Request

For more detailed guidelines, please refer to the CONTRIBUTING.md file.

---

📄 License

Distributed under the MIT License. See LICENSE for more information.

---

🙏 Acknowledgments

• Inspired by Mark Zuckerberg's vision for human-computer interfaces.
• Special thanks to the OpenAI community for their incredible APIs.
• Inspired by AnyNode for ComfyUI for its image generation capabilities.
• Thanks to all contributors and users supporting the Ibis project!

---

📬 Contact

Have questions or feedback? Reach out to me at your.email@example.com.

---

Enjoy building with Ibis! 🚀