INT-428(AI
Essentials) CA-3
(Skill-Based)
Submitted By:
S no. Name Registration No. Roll No. Section
1. Saurabh Kumar 12324770 57 K23WG
Submitted To: Mr. Vikas Sharma
LOVELY PROFESSIONAL UNIVERSITY
1. Project Overview:
1.1 Title:
KNITTING PATTERN GENERATOR BOT
1.2 Introduction:
The KNITTING PATETERN GENERATOR BOT project
includes a web-based platform to print an individual’s
design of different categories of product. The project
focuses on integrating Artificial Intelligence and the
concepts of Algorithm design to make a platform
consisting of several memory ideas and design.
The webpage consists of four separate pages The
Home page, Login page, Dashboard page and for the
Pattern generator ‘s Pattern Generator page. Made
using basic web technologies and advanced styling to
make the website more interactive and responsive.
Moreover, it has been technically proven that Artificial
Intelligence generate the accurate pattern via its
enhances working of technique, it helps in developing
a better knowledge base than classical learning
methods.
1.3 Objective:
1. To develop an AI model that can generate unique
knitting pattern based on user inputs.
2. To design an interactive and responsive webpage
using HTML, CSS and JavaScript.
3. To add Pattern Generator for user engagement and
real- time working dashboard for better user
experience.
4. To provide interactive step-by-step knitting
instructions and real-time review of generated
pattern.
5. To enhance user importance and support for
different knitting technique.
2. Design and Architecture:
2.1 Interface Layer (Frontend):
- The basic layout of the webpage is made using
HTML (Hyper Text Markup Language). HTML
provides a structured and well-defined layout for
the webpage
and is used to connect to the other web-dev
technologies to enhance user interactivity and
responsiveness.
2.2 Styling Layer:
- Furthermore, to make the webpage more alive and
interactive CSS (Cascading Style Sheets) is used. The
CSS provides a large number of variables to
manipulate the entire layout of a given content and
uses coloring techniques to make the webpage
more visually appealing.
2.3 Logic Layer:
- Moreover, to provide the webpage responsiveness
JavaScript is used. JavaScript provides the logical
structure to a webpage and enhances user
experience via real-time data fetching and it also
helps in integrating other web-dev tools such as
Node.js and React for more responsiveness.
.
2.4 Data Storage Layer:
- The data to be shown on the website must be Store
and generated patterns and user preferences
without a backend by using Local Storage inside
desktop.
3. Implementation:
3.1 HTML (Hyper Text Markup Language):
- The HTML file defines the layout for the webpage
and it constructs the base foundation for
containers that includes the leaderboard table,
main table, boxes etc.
- HTML uses the following to connect with the other
files:
<a href="generator.html" class="cta-button">Try Pattern
Generator</a>
<link rel="stylesheet" href="styles.css">
3.2 CSS (Cascading Style Sheets):
- Using CSS properties such as hover and background
manipulation variables can help make the webpage more
interactive and colour gradients provides vibrant looks to
the webpage.
- The following is an example of styling a container for a
webpage:
.main-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
margin-bottom: 40px;
}
.nav-links {
display: flex;
gap: 20px;
}
.nav-links a {
color: var(--text-color);
text-decoration: none;
font-weight: 500;
padding: 8px 16px;
border-radius: var(--border-radius);
transition: background-color 0.2s;
}
3.3 JavaScript (JS):
- The use of JavaScript makes the webpage more alive and
functional, and it provides the connectivity to backend
and data transfer using specified declared functions and
calls using programming logic.
- The following is an example of JavaScript function for
login handling:
function handleLogin(event) {
event.preventDefault();
const username =
document.getElementById('username').value;
const password =
document.getElementById('password').value;
if (username && password)
{ gameState.isLoggedIn = true;
gameState.username = username;
updateAuthUI();
toggleLogin();
}
}
4. Dashboard Images:
Fig 4.1 Main Page
Fig 4.2 Home Page
Fig 4.3 Login Page
Fig 4.4 Pattern Generator Page
Fig 4.5 Image Generator Page
5. Technologies & Tools Used:
1. HTML (Hyper Text Markup Language)
2. CSS (Cascading Style Sheet)
3. JavaScript
4. Auth.js
5. Pattern.js
6. VS Code
7. Cursor AI Code Editor
8. Bolt new
9. Grok AI
10. Google Icon
11. Logo’s SVG
6. Conclusion:
- The Knitting Pattern AI Generator achieved all its
objectives by providing a fully functional,
interactive for generating knitting patterns.
- Users can easily design, visualize and customize
pattern without required advanced knitting
expertise.
- Moreover, the integration of AI and Algorithm
design to this website makes it more dynamically
and responsive. AI-driven pattern generation
ensures accurate stitch sequences, while real-time
visualization enhances user experiences.
- Finally, the project demonstrates the potential use
of Artificial Intelligence in creative fields,
showcasing how AI tools can assists users in
generating complex patterns effortlessly, even
without prior knitting knowledge.
7. LINKS:
GitHub: https://github.com/saurabh879708
Repository: https://github.com/saurabh879708/INT428---
Knitting-Pattern-Generator
