Balajiprasad's useful codes: HTML

Friday, September 19, 2025

Web - AI Based Regex Generator

Problem Statement:

I want to dynamically generate RegEx based on human provided input with simple .Net, C# web application.

Implementation:

- Create web application using .Net C#, Web API

- As prerequisite need to get the Open AI Service details. If it's not already exists follow this

Go to Portal.Azure.Com
Search for Azure OpenAI
Create new Open AI and click to go to Azure AI Foundry
In Azure AI Foundry, Left side click Home. This is your Open AI API Key to use in code below
In Azure AI Foundry, Left side click PlayGrounds/Chat, you should be able to setup new Chatbot with new deployment model (For ex: GPT3.5Turbo, GPT5 etc,.). This is your Deployment Model Name to use in code below.
Click the View Code on Chat, to get the Endpoint details. This is your Chat Completion Endpoint to use in code below.

- In index.cshtml, simply add textbox and post call

<h2>Balaji - AI-Powered Regex Validator - POC</h2>
<form method="post">
    <label for="rule">Enter validation rule (human text):</label><br />
    <input type="text" id="rule" name="Rule" value="@Model.Rule" size="50" /><br /><br />
     <button type="submit">Generate Regex</button><br /><br />
   @if (!string.IsNullOrEmpty(Model.GeneratedRegex))
    {
        <div><strong>Generated Regex:</strong> @Model.GeneratedRegex</div>
     <br />
        <label for="inputText">Enter text to validate:</label>
   <br />
        <input type="text" id="inputText" name="InputText" value="@Model.InputText" size="50" />
     <br />
     <br />
        <div id="result">@Model.ValidationResult</div>
    }
</form>

- In Index.cshtml.cs, add below logic to generate the validation from AI code.

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Net.Http;
using System.Text;
using System.Text.Json;
using System.Threading.Tasks;

namespace POCRegexBuilderAI.Pages
{
    public class IndexModel : PageModel
    {
        [BindProperty]
        public string Rule { get; set; }
   [BindProperty]
        public string InputText { get; set; }
   public string GeneratedRegex { get; set; }
        public string ValidationResult { get; set; }

        public async Task<IActionResult> OnPostAsync()
        {
            if (!string.IsNullOrEmpty(Rule))
            {
                // Call OpenAI API to generate regex
                var regex = await GenerateRegexFromRule(Rule);
                GeneratedRegex = regex;

                if (!string.IsNullOrEmpty(InputText) && !string.IsNullOrEmpty(regex))
                {
                    try
                    {
                        var isValid = System.Text.RegularExpressions.Regex.IsMatch(InputText, regex);
                        ValidationResult = isValid ? "✅ Valid input" : "❌ Invalid input";
                    }
                    catch
                    {
                        ValidationResult = "⚠️ Invalid regex pattern.";
                    }
                }
            }
     return Page();
        }
   private async Task<string> GenerateRegexFromRule(string rule)
        {
            var apiKey = "1.ReplaceYourOpenAIKey";
            var prompt = $"Convert this rule to regex: {rule}";
            var requestBody = new
            {
                model = "gpt-35-turbo", //2.Replace with your deployment model
                messages = new[]
                {
                new { role = "user", content = prompt }
            }
            };
     using var client = new HttpClient();
            client.DefaultRequestHeaders.Add("Authorization", $"Bearer {apiKey}");
     var chatCompletionUrl = "https://api.openai.com/v1/chat/completions";//3.Replace with your chatmodel endpoint
     var content = new StringContent(JsonSerializer.Serialize(requestBody), Encoding.UTF8, "application/json");
            var response = await client.PostAsync(chatCompletionUrl, content);
            var responseString = await response.Content.ReadAsStringAsync();

            using var doc = JsonDocument.Parse(responseString);
            var regex = doc.RootElement.GetProperty("choices")[0].GetProperty("message").GetProperty("content").GetString();
     return regex.Trim();
        }
     }
}

- Now simply try with human text ("Zipcode with alphabet numeric with Min 3 and Max 5 character") to convert into Regex to apply in any textbox UI as output. It will show the validation simply as below

Thursday, April 25, 2024

Html JS - Handle Browser Back Button on SPA

In Single page applications, we will not have dedicated URLs. So on click of Browser Back button it will navigate us to previous page and we lost our current page changes. We can handle this with native JavaScript functions,

Create Html Page as below to mimic SPA,

On click of each Page button, it can switch the content,

On Each Page navigation we can set the hash URL something like below using history.pushstate or location.hash

Now on click of back button use the hashchange event to detect and open the page accordingly

Here is full code:

<html>

<head>

</head>

<body>

<div id="page1" class="page">Page 1 Content</div>

<div id="page2" class="page">Page 2 Content</div>

<div id="page3" class="page">Page 3 Content</div>

</body>

$(document).ready(function () {

hideAllPages();

});

$(window).on('popstate', (e) => {

e.preventDefault();

var currentLocation = window.location.pathname;

history.push(currentLocation)

});

window.onbeforeunload = function () {

return "Are you sure you want to leave this page?";

};

addEventListener("hashchange", (event) => {

alert("New" + event.newURL);

alert("Old" + event.oldURL);

var currentHash = event.currentTarget.location.hash;

openPage(currentHash.replace("#", ""), true);

});

function hideAllPages() {

$(".page").hide();

}

function openPage(pageId, ignoreHistoryPush = false) {

hideAllPages();

$("#page" + pageId).show();

if (!ignoreHistoryPush) //This is to not add history on everytime

history.pushState({ page: pageId }, pageId, '#' + pageId);
//location.hash = pageId //This way also can set it

}

</script>

</html>