|
1 | | -# Word-Search-Chatbot-Using-Wikipedia |
| 1 | +# 📘 PICTOPEDIA – Word Search Chatbot Using Wikipedia |
| 2 | + |
2 | 3 | <img width="278" alt="image" src="https://github.com/user-attachments/assets/c9e79365-bc9d-4468-be03-61aea052b0c4" /> |
3 | 4 |
|
4 | | -Project Overview |
5 | | - |
6 | | -PICTOPEDIA is a chatbot that allows users to search for information on specific words or terms using the Wikipedia API. The application serves as an interactive word search tool where users can input queries and receive relevant information in response. |
7 | | - |
8 | | -Key Features |
9 | | -User-Friendly Interface: The chatbot features a simple and interactive UI with an input field for user queries and a search button to trigger responses. |
10 | | -Real-Time Information Retrieval: Fetches content directly from Wikipedia using API calls, ensuring accurate and comprehensive information. |
11 | | -Dynamic Chat Output: Displays search results in a chat-style format, enhancing user experience. |
12 | | -Technologies Used |
13 | | -HTML, CSS: For the frontend structure and styling. |
14 | | -JavaScript: Handles user input and integrates API calls for dynamic content rendering. |
15 | | -Wikipedia API: Provides a robust backend for fetching word definitions and related information. |
16 | | -The flow of the PICTOPEDIA: Word Search Chatbot Using Wikipedia API project can be outlined as follows: |
17 | | - |
18 | | -1. User Input |
19 | | -The user interacts with the chatbot by typing a query or word in the input field. |
20 | | -Example query: "What is Artificial Intelligence?" |
21 | | -2. Input Handling |
22 | | -When the user presses the Search button, an event handler function (handleUserInput()) is triggered in the script.js file. |
23 | | -The user's input is validated (checked for empty input). |
24 | | -3. API Request |
25 | | -The chatbot constructs a request to the Wikipedia API using the user's query. |
26 | | -The request fetches relevant data in JSON format from Wikipedia, such as the introduction or key information about the searched term. |
27 | | -4. Processing Response |
28 | | -The data received from Wikipedia is parsed to extract the necessary information. |
29 | | -Error handling is included for cases where no data is found or when the query is invalid. |
30 | | -5. Displaying Results |
31 | | -The chatbot dynamically updates the chat output area to display the response fetched from the Wikipedia API. |
32 | | -If the search is successful, it shows the relevant content in a user-friendly format. |
33 | | -If the search fails, it provides an appropriate error message (e.g., "Sorry, no information found for this word."). |
34 | | -6. User Interaction Loop |
35 | | -The chatbot allows the user to perform multiple searches by repeating steps 1-5. |
36 | | -It retains the chat history during the session to maintain conversation context. |
37 | | -Flow Summary |
38 | | -User Input ➡️ Input Handling ➡️ API Request ➡️ Response Processing ➡️ Display Results ➡️ Repeat Interaction |
| 5 | +--- |
| 6 | + |
| 7 | +**PICTOPEDIA** is a chatbot that allows users to search for information on specific words or terms using the Wikipedia API. |
| 8 | +It works like an **interactive word-search assistant**, where users can input queries and instantly receive relevant, real-time information. |
| 9 | + |
| 10 | +[](https://github.com/shivareddy2002/Word-Search-Chatbot-Using-Wikipedia/issues) |
| 11 | +[](https://github.com/shivareddy2002/Word-Search-Chatbot-Using-Wikipedia/network) |
| 12 | +[](https://github.com/shivareddy2002/Word-Search-Chatbot-Using-Wikipedia/stargazers) |
| 13 | +[](LICENSE) |
| 14 | + |
| 15 | +--- |
| 16 | + |
| 17 | +## 🔗 Live Demo |
| 18 | +👉 [**PICTOPEDIA Chatbot**](https://shivareddy2002.github.io/Word-Search-Chatbot-Using-Wikipedia-/) |
| 19 | + |
| 20 | +--- |
| 21 | + |
| 22 | +## 🚀 Project Overview |
| 23 | + |
| 24 | +**How It Works (Step-by-Step):** |
| 25 | + |
| 26 | +1. **User Input** → User types a query in the chatbot. |
| 27 | + *Example:* `"What is Artificial Intelligence?"` |
| 28 | + |
| 29 | +2. **Input Handling** → Input validated and handled by `handleUserInput()` in `script.js`. |
| 30 | + |
| 31 | +3. **API Request** → Sends request to **Wikipedia API** for relevant information. |
| 32 | + |
| 33 | +4. **Response Processing** → Extracts and formats the response. |
| 34 | + |
| 35 | +5. **Displaying Results** → Shows content in a **chat-style interface**. |
| 36 | + |
| 37 | +6. **Interaction Loop** → Supports multiple queries with **chat history retention**. |
| 38 | + |
| 39 | +➡️ **Flow Summary:** |
| 40 | +User Input ➡️ Input Handling ➡️ API Request ➡️ Response Processing ➡️ Display Results ➡️ Repeat Interaction |
| 41 | + |
| 42 | +--- |
| 43 | + |
| 44 | +## ✨ Features |
| 45 | + |
| 46 | +- 🖥️ **Simple & Interactive UI** – Clean and user-friendly interface. |
| 47 | +- ⚡ **Real-Time Retrieval** – Fetches data live from Wikipedia. |
| 48 | +- 💬 **Chat-Style Display** – Results presented conversationally. |
| 49 | +- 🔄 **Multi-Search Support** – Keeps chat history during session. |
| 50 | +- ❌ **Error Handling** – Provides fallback messages if data not found. |
| 51 | + |
| 52 | +--- |
| 53 | + |
| 54 | +## 🛠️ Technologies Used |
| 55 | + |
| 56 | +- **HTML5, CSS3** – UI design & layout. |
| 57 | +- **JavaScript (ES6)** – Logic, event handling & API calls. |
| 58 | +- **Wikipedia API** – Fetches word/term information. |
| 59 | + |
| 60 | +--- |
| 61 | + |
| 62 | +## 🔮 Future Enhancements |
| 63 | + |
| 64 | +Below are **ready-to-drop code snippets** you can paste into your project to implement the five enhancements: |
| 65 | + |
| 66 | +- 🔊 **Text-to-Speech (TTS)** |
| 67 | +- 🌐 **Multiple-language support (Wikipedia language domains)** |
| 68 | +- 🎨 **UI/UX themes (theme presets + CSS variables)** |
| 69 | +- 📱 **Mobile responsive layout (CSS breakpoints & flexible layout)** |
| 70 | +- 💾 **Download chat history (JSON / TXT export)** |
| 71 | + |
| 72 | +--- |
| 73 | + |
| 74 | +## 👨💻 Author |
| 75 | + |
| 76 | +**LOMADA SIVA GANGI REDDY** |
| 77 | + |
| 78 | +--- |
| 79 | + |
| 80 | +## 📂 Project Flow |
| 81 | + |
| 82 | +```mermaid |
| 83 | +flowchart LR |
| 84 | +A[User Input] --> B[Input Handling] |
| 85 | +B --> C[Wikipedia API Request] |
| 86 | +C --> D[Process Response] |
| 87 | +D --> E[Display Results] |
| 88 | +E --> F[Interaction Loop] |
| 89 | +
|
0 commit comments