AOSSIE-Org / AOSSIE-Org/PictoPy
Feat: Add Smart Search Bar with Voice Search Button for Quick Navigation
- Dominant language
- Python
- Stars
- 283
- Forks
- 679
- Avg merge
- 7d 2h
- Merged PRs (30d)
- 3
Description
## 🎤 Add Smart Search Bar with Voice Search Button for Quick Navigation
### Overview
Currently, PictoPy users manually browse through the sidebar to access features like **AI Tagging**, **Videos**, or **Albums**.
Adding a **Smart Search Bar** with a small **microphone button** will make it easier for users to quickly find and open sections or search their uploaded images.
This enhancement will improve accessibility, enhance user experience, and give a modern, interactive touch to the PictoPy interface.
### Goals
- Simplify navigation across different pages.
- Allow users to search images, tags, or pages directly.
- Provide the foundation for future voice-based controls.
### Feature Details
#### 🔹 Smart Search Bar
- Positioned at the top navigation bar or header area.
- Accepts text input to search for:
- Image names or tags
- Pages like “AI Tagging”, “Videos”, “Albums”, etc.
- Optionally displays dropdown results.
#### 🔹 Voice Search Button
- Small **microphone icon** (`` or Lucide icon) inside or next to the search bar.
- On click → activates basic browser speech recognition (`SpeechRecognition` API).
- Converts the voice input into text within the search field (no heavy AI processing).
### Implementation Plan
1. Create a new `SearchBar` component.
2. Add an input field with a placeholder like `"Search images or pages..."`.
3. Include a microphone icon button next to the field.
4. Implement simple voice-to-text using the Web Speech API.
### ✅ Expected Outcome
- Clean and fast navigation experience.
- Convenient for users who prefer voice interaction.
- Visually modern UI improvement that fits PictoPy’s theme.
- Provides a base for future smart/AI search features.
### Next Steps
If approved, I will open a PR that:
- Adds the new **Search Bar** component.
- Includes a **microphone button** for basic speech input.
- Maintains consistency with existing PictoPy UI and design standards.
### Add ScreenShots
### Record
- [x] I agree to follow this project's Code of Conduct
- [x] I want to work on this issue
### Checklist before Submitting.
- [x] Have you updated docs for it?.
- [ ] Have you added unit tests?.
- [ ] Have you made sure unit tests pass?
- [x] Have you made sure code formatting is correct?
- [ ] Does it contain any style related issues?
Contributor guide
Assessment
This issue has not been assessed yet.