Skip to content

Commit 7128374

Browse files
Update README.md
1 parent e9e3f33 commit 7128374

File tree

1 file changed

+87
-36
lines changed

1 file changed

+87
-36
lines changed

README.md

Lines changed: 87 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,89 @@
1-
# Word-Search-Chatbot-Using-Wikipedia
1+
# 📘 PICTOPEDIA – Word Search Chatbot Using Wikipedia
2+
23
<img width="278" alt="image" src="https://github.com/user-attachments/assets/c9e79365-bc9d-4468-be03-61aea052b0c4" />
34

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+
[![GitHub issues](https://img.shields.io/github/issues/shivareddy2002/Word-Search-Chatbot-Using-Wikipedia)](https://github.com/shivareddy2002/Word-Search-Chatbot-Using-Wikipedia/issues)
11+
[![GitHub forks](https://img.shields.io/github/forks/shivareddy2002/Word-Search-Chatbot-Using-Wikipedia)](https://github.com/shivareddy2002/Word-Search-Chatbot-Using-Wikipedia/network)
12+
[![GitHub stars](https://img.shields.io/github/stars/shivareddy2002/Word-Search-Chatbot-Using-Wikipedia)](https://github.com/shivareddy2002/Word-Search-Chatbot-Using-Wikipedia/stargazers)
13+
[![License](https://img.shields.io/github/license/shivareddy2002/Word-Search-Chatbot-Using-Wikipedia)](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

Comments
 (0)