Volume 9, Issue 11, November – 2024 International Journal of Innovative Science and Research Technology

ISSN No:-2456-2165

Text to Web Application Using LLM

Aishwarya G1 Sathwik C M2
Department of ISE Department of ISE
RNS Institute of Technology RNS Institute of Technology

Shashank V H3 Subham Mohanty4

Department of ISE Department of ISE
RNS Institute of Technology RNS Institute of Technology

Sudeep D5
Department of ISE
RNS Institute of Technology

Abstract:- This paper provides an extensive survey on language. These models leverage natural language
the application of large language models (LLMs) in processing (NLP) techniques to parse user input, identify
automating web application development, specifically the intended functionality, and create code that aligns with
by translating natural language descriptions into established programming conventions. Through LLMs,
functional code. By examining recent advancements, developers and non-technical users alike can describe the
core challenges, and future directions, this survey intended features and receive near- instantaneous output
outlines the capabilities and transformative potential in the form of executable code, Streamlining the
of LLMs in software engineering. Special emphasis is development pipeline.
placed on their role in reducing the technical barriers
of web development through text-to-web app II. LITERATURE SURVEY
transformations, bridging the gap between user-friendly
requirements and operational implementation. This The literature on text-to-code transformation and the
survey also identifies key areas for improvement, deployment of LLMs in software development reveals
offering insights into the advancement of LLM-driven both promising advances and persistent obstacles. Here,
web automation. we explore notable studies on program synthesis, the
application of LLMs in model-driven engineering, and
Keywords:- Large Language Models (LLMs),Text-to-Web the limitations in natural language processing for
Application Generation, Automated Code Generation, software development.
Machine Learning in Web Development, Natural Language
Processing (NLP),Static Web Application Generator,  Program Synthesis and LLMs:
Web Development Automation, Frontend Code Chen et al. (2021) conducted one of the most
Generation HTML/CSS/JavaScript Code Generation, foundational studies on using LLMs for program synthesis,
Web App Scaffolding, NLP-Driven Software Engineering showcasing the potential of models like Codex to generate
code from natural language prompts. In program
I. INTRODUCTION synthesis, LLMs are tasked with understanding user
inputs that describe specific software functionalities and
In recent years, web applications have become generating code accordingly. This study reveals that
ubiquitous across domains, serving as essential platforms LLMs trained on large datasets can effectively emulate
for communication, commerce, education, and data programming structures, syntax, and patterns, providing
management. The development of these applications, solutions to basic programming problems. Codex, for
however, remains a complex, multi-step process that example, can translate the prompt “create a login page”
requires technical expertise, considerable time, and into a combination of HTML, CSS, and JavaScript code
significant resources. Traditional software engineering that enables user authentication. However, while LLMs
workflows involve translating requirements into code, perform well with short, precise prompts, their
managing version control, testing, and deploying effectiveness diminishes as tasks become more complex
applications. This approach, while effective, can be or require extensive contextual understanding.
costly, particularly for non-technical users who must rely
on developers to convert ideas into functional products.  Model-Driven Engineering (MDE):
The emergence of large language models (LLMs) Schröder (2023) explored the integration of LLMs
introduces a promising alternative, enabling the direct in Model-Driven Engineering (MDE), a method where
transformation of natural language prompts into applications are represented through models that serve as
functional code. LLMs such as GPT-4, Codex, and Bard templates for code generation. This approach is
are trained on vast datasets and equipped with the particularly effective in automating repetitive tasks, such
capability to understand and generate human-like as generating CRUD (Create, Read, Update, Delete)

IJISRT24NOV1658 www.ijisrt.com 2464

Volume 9, Issue 11, November – 2024 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165
operations in web applications. By filling in predefined create functional specifications, object-oriented models,
templates based on user instructions, LLMs reduce and unit tests, illustrated through a web project case study.
development time and simplify the process of creating This method enhances software development efficiency
standard web components. Schröder also identified some by automating code generation from structured
challenges in applying MDE with LLMs, particularly requirements. However, the LLM struggles with
around handling complex logic, dependencies, and ambiguous inputs and requires well-structured
ensuring that the generated code aligns with the broader requirements to operate effectively. The paper presents a
application architecture. Despite these limitations, the tailored LLM that uses a "Progressive Prompting"
study emphasizes the potential of LLMs to revolutionize method for incremental guidance.
MDE by reducing manual coding efforts.
 Development of Web Application for Practicing
 Challenges in NLP for Development: Finnish Language Writing Skills:
El Asri et al. (2024) discussed critical challenges Dmitrii Bacherikov (2024) explores using ChatGPT
that arise when LLMs are tasked with interpreting abstract for interactive Finnish exercises with instant feedback,
or incomplete user requirements. Unlike traditional supported by Sanakirja.fi for word explanations. This
programming, where code specifications are explicit, approach aids YKI test preparation but needs refinement
natural language prompts can be vague or ambiguous, for accuracy and consistency due to evolving language
often lacking the precision needed for accurate code models. The study introduces a taxonomy for integrating
generation. For example, a prompt like “create a LLMs in software development, addressing key
responsive dashboard” provides minimal guidance on applications and challenges.
what data the dashboard should display or how it should be
organized. To address this, El Asri et al. proposed a  Web App for Retrieval-Augmented Generation:
multi-turn dialogue approach, where LLMs iteratively Implementation and Testing:
ask clarifying questions to refine their understanding. Radeva et al. (2024) present PaSSER, a tool that
This study highlights that, for LLMs to be effective in combines retrieval- augmented generation (RAG) with
complex projects, they must be able to retain context over LLMs to enhance testing in smart agriculture. While it
multiple exchanges and refine outputs based on evolving improves performance evaluation using ROUGE and
instructions. BLEU metrics, high computational demands and
integration challenges may limit scalability. The tool also
 Security Concerns in LLM-Generated Code: enhances transparency and security via blockchain
In a study by Patel et al. (2024), security issues integration.
inherent to LLM- generated code are explored.
Automated code generation can inadvertently introduce  Large Language Models as Software Components:
security vulnerabilities, such as insufficient input Irene Weber (2024) creates a taxonomy for
validation, improper data handling, and inadequate categorizing LLM-integrated applications, emphasizing
authentication mechanisms. For instance, if an LLM their architectural interactions. The study highlights how
generates a login page but does not enforce secure LLMs improve software development through natural
password requirements or include data encryption, the language interaction and task automation but notes ethical
resulting application could be susceptible to attacks. Patel concerns and integration complexities as potential
et al. recommend that LLMs incorporate a security-aware obstacles.
layer that scans generated code for common vulnerabilities.
They suggest that incorporating cybersecurity standards  When LLM-based Code Generation Meets the
directly into the LLM training datasets could reduce the risk Software Development Process:
of generating insecure code, making these tools safer for Feng Lin and Dong Jae Kim (2024) introduce LCG,
widespread use in application development. an agent-based code generation technique that uses LLM
agents and self- refinement to improve output quality.
 Improving Web Element Localization by Using a Large LCG enhances code generation and reduces code smells
Language Model: through collaboration among agents across software
This study assesses the VON Similo LLM against a process models. However, integrating multiple LLM
baseline with 804 web element pairs, focusing on agents can lead to miscommunication and limit flexibility
identification accuracy and execution times. The in varied development contexts. The framework focuses
approach improves accuracy in identifying web elements on accuracy and stability through software process models
and reduces false positives, potentially lowering and prompt engineering techniques.
maintenance costs. However, it notes slower execution
times and increased costs with the GPT-4 model.  Objectives
VON Similo leverages GPT-4’s human-like reasoning for
better web element localization.  Assess how well LLMs interpret natural language
requirements and generate functional web code.
 Requirements are All You Need:  Identify obstacles that prevent full automation in web
From Requirements to Code with LLMs: Bingyang development, such as ambiguous inputs and context
(2024) discusses an LLM that interprets requirements to understanding.

IJISRT24NOV1658 www.ijisrt.com 2465

Volume 9, Issue 11, November – 2024 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165
 Propose strategies to enhance accuracy, robustness, knowledge.
and user-friendliness of LLM-driven applications.  Ensure framework adaptability by producing code
 Collect user feedback to evaluate the quality and compatible with multiple frameworks like React,
usability of LLM-generated code. Angular, and Flask, allowing developers to choose the
 Investigate how context affects code generation best fit for their projects.
accuracy and adaptability.  Enhance workflow efficiency by automating repetitive
 Explore the potential for LLMs to assist in coding tasks, freeing developers to focus on higher-
collaborative coding tasks like brainstorming and level design and architecture.
debugging.
 Measure LLM performance across various III. METHODOLOGY
programming languages to identify strengths and
weaknesses.  System Architecture Design:
The system is structured into modules, with each
 Proposed System module handling distinct aspects of the development
The proposed system uses a decentralized blockchain- process, such as frontend code synthesis, backend
based approach to enhance shipment tracking across the integration, and user interface design. This modular
supply chain. By employing smart contracts, it automates design allows for updates or improvements to specific
updates to shipment status and verifies ownership records components without impacting the entire system,
at each stage, providing real-time, immutable updates enhancing scalability and flexibility.
accessible to authorized participants. This decentralized
structure ensures data integrity and security, as records  Security and Quality Assurance Protocols:
cannot be altered once added, and removes reliance on a Given the risks associated with automated code
single point of failure.This Decentralized Application generation, the system includes a security-focused quality
(DApp) overcomes limitations of traditional systems that assurance protocol. This protocol incorporates libraries
rely on intermediaries, which can slow processes and for secure input validation, authentication, and encryption,
increase costs. Instead, authorized takeholders can track ensuring that sensitive data is handled responsibly. The
shipments at every stage directly through the blockchain, security layer also performs vulnerability checks on
enhancing transparency and reducing the need for third generated code to prevent common security issues such
parties. This system fosters trust and enables more as SQL injection and cross-site scripting (XSS).
efficient, cost-effective supply chain management.
 Performance Benchmarking:
 Advantages of Proposed System Performance assessments are conducted to verify that
generated applications meet industry standards for
 Significantly reduce the time required to create functionality, efficiency, and reliability. Benchmarking
functional prototypes, allowing developers to quickly tools simulate real-world scenarios to evaluate code
gather user feedback and iterate on designs. quality in terms of latency, load handling, and resource
 Improve accessibility for non-technical users by consumption, providing valuable feedback for model
enabling them to articulate requirements in plain refinement.
language, reducing the need for specialized coding

 System Architecture

Fig 1 System Architecture

IJISRT24NOV1658 www.ijisrt.com 2466

Volume 9, Issue 11, November – 2024 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165
 The diagram shows an interactive webpage generation [8]. Thippeswamy, B. M., Ramachandra, H. V.,
system using a Large Language Model (LLM). The Rohan, S., Salam, R., Pai, M. "TextVerse: A
process begins with the user entering a plain-text Streamlit Web Application for Advanced Analysis
prompt on an interactive webpage, which is then sent of PDF and Image Files with and without Language
to the system for processing. Models." IEEE, 2024.
 Within the system, the LLM first validates the prompt [9]. Ethape, P., Kane, R., Gadekar, G., Chimane, S.
to ensure it meets required standards. Once validated, "Smart Automation Using LLM." International
it generates the corresponding webpage code. This Research Journal of Innovations in Engineering
code then goes through a validation step to check for and Technology, Dharmapuri, Vol. 7, Iss. 11, Nov
functionality and accuracy. If validation fails, the LLM 2023.
refines the prompt and repeats the process until valid [10]. Schröder, C. "From Natural Language to Web
code is generated. Applications: Using Large Language Models for
 After validation, the code is sent to a server, which can Model- Driven Software Engineering." 2023.
operate locally or globally. The server processes the [11]. Voronin, D. N. "Development and Evaluation of
code, initially displaying a loading page and then an LLM- Based Tool for Automatically Building
rendering the final interactive webpage for the user. Web Applications." S.B. Electrical Engineering and
 This iterative cycle of prompt refinement and Computer Science, Massachusetts Institute of
validation ensures that the user receives an accurate and Technology, 2023.
functional webpage based on their input. [12]. Austin, J., Odena, A., Nye, M., Bosma, M.,
Michalewski, H., Dohan, D., Jiang, E., Cai, C.,
IV. CONCLUSION Terry, M., Le, Q., Sutton, C. "Program Synthesis
with Large Language Models." Google Research,
The fusion of natural language processing and code 2023.
generation through LLMs offers transformative
possibilities for web development. By automating the
generation of web applications from textual inputs, LLMs
provide an intuitive and accessible environment for a
broad range of users, from novice developers to non-
technical stakeholders. Despite current limitations in
handling complex logic and ensuring robust security,
LLM-based systems show significant promise. As models
evolve to handle contextual awareness, user feedback,
and enhanced security features, LLMs are poised to
become integral components of the software engineering
process, promoting efficiency and innovation in web
application development.

REFERENCES

[1]. Weber, I. "Large Language Models as Software

Components: A Taxonomy for LLM-Integrated
Applications." Submitted on 13 Jun 2024.
[2]. Lin, F., Kim, D. J., Chen, T. H. "When LLM-
based Code Generation Meets the Software
Development Process." 2024.
[3]. Bacherikov, D. "Development of Web Application
for Practicing Finnish Language Writing Skills
with the Help of LLMs." 2024.
[4]. Cui, Y. "Insights from Benchmarking Frontier
Language Models on Web App Code Generation."
Submitted on 8 Sep 2024.
[5]. Wei, B. "Requirements are All You Need: From
Requirements to Code with LLMs." Submitted on
14 Jun 2024, last revised 17 Jun 2024.
[6]. Nass, M., Alégroth, E., Feldt, R. "Improving Web
Element Localization by Using a Large Language
Model." 2024.
[7]. Radeva, I., Popchev, I., Doukovska, L., Dimitrova,
M. "Web Application for Retrieval-Augmented
Generation: Implementation and Testing."
Electronics 2024.

IJISRT24NOV1658 www.ijisrt.com 2467