First Model Version

app/api/Dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.8
+
+COPY requirements.txt .
+
+RUN pip install -r requirements.txt
+
+COPY . .
+
+EXPOSE 3000
+
+CMD ["flask", "run", "--host=0.0.0.0", "--port=3000"]

app/api/app.py

@@ -0,0 +1,16 @@
+from flask import Flask, render_template, jsonify
+from model import model
+
+app = Flask(__name__)
+
+@app.route("/", methods = ['GET'])
+def hello_word():
+    return render_template("index.html")
+
+@app.route("/generate", methods = ['GET'])
+def generate():
+    name = model.generate_name()
+    return jsonify(name=name)
+
+if __name__ == "__main__":
+    app.run(port = 3000, debug = True)

app/api/docker-compose.yml

@@ -0,0 +1,11 @@
+version:  "3.7"
+
+services:
+  mlapp:
+    container_name: mlapp
+    image: iamkavinarasu/mlapp
+    ports:
+      - "3000:3000"
+    build:
+      context: .
+      dockerfile: Dockerfile

app/api/model/model.py

@@ -0,0 +1,22 @@
+import pickle
+from pathlib import Path
+import torch
+
+BASE_DIR = Path(__file__).resolve(strict=True).parent
+
+with open(f"{BASE_DIR}/bigrams.pkl", "rb") as file:
+     P,char_to_int,int_to_char = pickle.load(file)
+
+generator = torch.Generator().manual_seed(2147483647)
+
+def generate_name():
+    name = []
+    ix = 0
+    while True:
+        probs = P[ix]
+        ix = torch.multinomial(probs, num_samples = 1, replacement = True, generator = generator).item()
+        name.append(int_to_char[ix])
+        if ix == 0:
+            break
+    name = ''.join(name)
+    return name

app/api/requirements.txt

@@ -0,0 +1,9 @@
+click==8.1.3
+Flask==2.2.2
+itsdangerous==2.1.2
+Jinja2==3.1.2
+MarkupSafe==2.1.2
+six==1.16.0
+torch==1.13.1
+typing_extensions==4.5.0
+Werkzeug==2.2.3

app/api/static/css/styles.css

@@ -0,0 +1,365 @@
+body {
+  margin: auto;
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  overflow: auto;
+  background: linear-gradient(315deg, rgba(101,0,94,1) 3%, rgba(60,132,206,1) 38%, rgba(48,238,226,1) 68%, rgba(255,25,25,1) 98%);
+  animation: gradient 15s ease infinite;
+  background-size: 400% 400%;
+  background-attachment: fixed;
+}
+
+@keyframes gradient {
+  0% {
+      background-position: 0% 0%;
+  }
+  50% {
+      background-position: 100% 100%;
+  }
+  100% {
+      background-position: 0% 0%;
+  }
+}
+
+.wave {
+  background: rgb(255 255 255 / 25%);
+  border-radius: 1000% 1000% 0 0;
+  position: fixed;
+  width: 200%;
+  height: 12em;
+  animation: wave 10s -3s linear infinite;
+  transform: translate3d(0, 0, 0);
+  opacity: 0.8;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+}
+
+.wave:nth-of-type(2) {
+  bottom: -1.25em;
+  animation: wave 18s linear reverse infinite;
+  opacity: 0.8;
+}
+
+.wave:nth-of-type(3) {
+  bottom: -2.5em;
+  animation: wave 20s -1s reverse infinite;
+  opacity: 0.9;
+}
+
+@keyframes wave {
+  2% {
+      transform: translateX(1);
+  }
+
+  25% {
+      transform: translateX(-25%);
+  }
+
+  50% {
+      transform: translateX(-50%);
+  }
+
+  75% {
+      transform: translateX(-25%);
+  }
+
+  100% {
+      transform: translateX(1);
+  }
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family:'Courier New', Courier, monospace;
+}
+body {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+button {
+  border: 0;
+  outline: 0;
+}
+.container {
+  margin: 40px 0;
+  width: 400px;
+  height: 600px;
+  padding: 10px 25px;
+  background: #0a0e31;
+  border-radius: 10px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35), 0 8px 12px rgba(0, 0, 0, 0.15);
+  font-family: "Montserrat";
+}
+.container .title {
+  font-size: 1.75rem;
+  margin: 10px -5px;
+  margin-bottom: 30px;
+  color: #fff;
+}
+.result {
+  position: relative;
+  width: 100%;
+  height: 65px;
+  overflow: hidden;
+}
+.result__info {
+  position: absolute;
+  bottom: 4px;
+  color: #fff;
+  font-size: 0.8rem;
+  transition: all 150ms ease-in-out;
+  transform: translateY(200%);
+  opacity: 0;
+}
+.result__info.right {
+  right: 8px;
+}
+.result__info.left {
+  left: 8px;
+}
+.result__viewbox {
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  color: #fff;
+  text-align: center;
+  line-height: 65px;
+}
+.result #copy-btn {
+  position: absolute;
+  top: var(--y);
+  left: var(--x);
+  width: 38px;
+  height: 38px;
+  background: #fff;
+  border-radius: 50%;
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0);
+  transition: all 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  cursor: pointer;
+  z-index: 2;
+}
+.result #copy-btn:active {
+  box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.08);
+}
+.result:hover #copy-btn {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1.35);
+}
+.field-title {
+  position: absolute;
+  top: -10px;
+  left: 8px;
+  transform: translateY(-50%);
+  font-weight: 800;
+  color: rgba(255, 255, 255, 0.5);
+  text-transform: uppercase;
+  font-size: 0.65rem;
+  pointer-events: none;
+  user-select: none;
+}
+.options {
+  width: 100%;
+  height: auto;
+  margin: 50px 0;
+}
+.range__slider {
+  position: relative;
+  width: 100%;
+  height: calc(65px - 10px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  margin: 30px 0;
+}
+.range__slider::before, .range__slider::after {
+  position: absolute;
+  color: #fff;
+  font-size: 0.9rem;
+  font-weight: bold;
+}
+.range__slider::before {
+  content: attr(data-min);
+  left: 10px;
+}
+.range__slider::after {
+  content: attr(data-max);
+  right: 10px;
+}
+.range__slider .length__title::after {
+  content: attr(data-length);
+  position: absolute;
+  right: -16px;
+  font-variant-numeric: tabular-nums;
+  color: #fff;
+}
+#slider {
+  -webkit-appearance: none;
+  width: calc(100% - (70px));
+  height: 2px;
+  border-radius: 5px;
+  background: rgba(255, 255, 255, 0.314);
+  outline: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+#slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #fff;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+}
+#slider::-webkit-slider-thumb:hover {
+  background: #d4d4d4;
+  transform: scale(1.2);
+}
+#slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border: 0;
+  border-radius: 50%;
+  background: #fff;
+  cursor: pointer;
+  transition: background 0.15s ease-in-out;
+}
+#slider::-moz-range-thumb:hover {
+  background: #d4d4d4;
+}
+.settings {
+  position: relative;
+  height: auto;
+  widows: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.settings .setting {
+  position: relative;
+  width: 100%;
+  height: calc(65px - 10px);
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  padding: 10px 25px;
+  color: #fff;
+  margin-bottom: 8px;
+}
+.settings .setting input {
+  opacity: 0;
+  position: absolute;
+}
+.settings .setting input + label {
+  user-select: none;
+}
+.settings .setting input + label::before, .settings .setting input + label::after {
+  content: "";
+  position: absolute;
+  transition: 150ms cubic-bezier(0.24, 0, 0.5, 1);
+  transform: translateY(-50%);
+  top: 50%;
+  right: 10px;
+  cursor: pointer;
+}
+.settings .setting input + label::before {
+  height: 30px;
+  width: 50px;
+  border-radius: 30px;
+  background: rgba(214, 214, 214, 0.434);
+}
+.settings .setting input + label::after {
+  height: 24px;
+  width: 24px;
+  border-radius: 60px;
+  right: 32px;
+  background: #fff;
+}
+.settings .setting input:checked + label:before {
+  background: #5d68e2;
+  transition: all 150ms cubic-bezier(0, 0, 0, 0.1);
+}
+.settings .setting input:checked + label:after {
+  right: 14px;
+}
+.settings .setting input:focus + label:before {
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75);
+}
+.settings .setting input:disabled + label:before, .settings .setting input:disabled + label:after {
+  cursor: not-allowed;
+}
+.settings .setting input:disabled + label:before {
+  background: #4f4f6a;
+}
+.settings .setting input:disabled + label:after {
+  background: #909090;
+}
+.btn.generate {
+  user-select: none;
+  position: relative;
+  width: 100%;
+  height: 50px;
+  margin: 10px 0;
+  border-radius: 8px;
+  color: #fff;
+  border: none;
+  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  letter-spacing: 1px;
+  font-weight: bold;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.btn.generate:active {
+  transform: translateY(-3%);
+  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.08);
+}
+.support {
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+  padding: 10px;
+  display: flex;
+}
+a {
+  margin: 0 20px;
+  color: #fff;
+  font-size: 2rem;
+  transition: all 400ms ease;
+}
+a:hover {
+  color: #222;
+}
+.github-corner svg {
+  position: absolute;
+  right: 0;
+  top: 0;
+  mix-blend-mode: darken;
+  color: #eee;
+  fill: #353535;
+  clip-path: polygon(0 0, 100% 0, 100% 100%);
+}
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 0.56s;
+}
+@keyframes octocat-wave {
+  0%, 100% {
+    transform: rotate(0);
+ }
+  20%, 60% {
+    transform: rotate(-20deg);
+ }
+  40%, 80% {
+    transform: rotate(10deg);
+ }
+}

app/api/static/js/index.js

@@ -0,0 +1,123 @@
+// Clear the concole on every refresh
+// console.clear();
+// set the body to full height
+// document.body.style.height = `${innerHeight}px`
+
+// Range Slider Properties.
+// Fill : The trailing color that you see when you drag the slider.
+// background : Default Range Slider Background
+const sliderProps = {
+	fill: "#0B1EDF",
+	background: "rgba(255, 255, 255, 0.214)",
+};
+
+// Selecting the Range Slider container which will effect the LENGTH property of the password.
+const slider = document.querySelector(".range__slider");
+
+// Text which will show the value of the range slider.
+const sliderValue = document.querySelector(".length__title");
+
+// Using Event Listener to apply the fill and also change the value of the text.
+slider.querySelector("input").addEventListener("input", event => {
+	sliderValue.setAttribute("data-length", event.target.value);
+	applyFill(event.target);
+});
+// Selecting the range input and passing it in the applyFill func.
+applyFill(slider.querySelector("input"));
+// This function is responsible to create the trailing color and setting the fill.
+function applyFill(slider) {
+	const percentage = (100 * (slider.value - slider.min)) / (slider.max - slider.min);
+	const bg = `linear-gradient(90deg, ${sliderProps.fill} ${percentage}%, ${sliderProps.background} ${percentage +
+			0.1}%)`;
+	slider.style.background = bg;
+	sliderValue.setAttribute("data-length", slider.value);
+}
+
+// Selecting all the DOM Elements that are necessary -->
+
+// The Viewbox where the result will be shown
+const resultEl = document.getElementById("result");
+// The input slider, will use to change the length of the password
+const lengthEl = document.getElementById("slider");
+
+// Button to generate the password
+const generateBtn = document.getElementById("generate");
+// Button to copy the text
+const copyBtn = document.getElementById("copy-btn");
+// Result viewbox container
+const resultContainer = document.querySelector(".result");
+// Text info showed after generate button is clicked
+const copyInfo = document.querySelector(".result__info.right");
+// Text appear after copy button is clicked
+const copiedInfo = document.querySelector(".result__info.left");
+
+// if this variable is trye only then the copyBtn will appear, i.e. when the user first click generate the copyBth will interact.
+let generatedPassword = false;
+
+// Update Css Props of the COPY button
+// Getting the bounds of the result viewbox container
+let resultContainerBound = {
+	left: resultContainer.getBoundingClientRect().left,
+	top: resultContainer.getBoundingClientRect().top,
+};
+// This will update the position of the copy button based on mouse Position
+resultContainer.addEventListener("mousemove", e => {
+	resultContainerBound = {
+		left: resultContainer.getBoundingClientRect().left,
+		top: resultContainer.getBoundingClientRect().top,
+	};
+	if(generatedPassword){
+		copyBtn.style.opacity = '1';
+		copyBtn.style.pointerEvents = 'all';
+		copyBtn.style.setProperty("--x", `${e.x - resultContainerBound.left}px`);
+		copyBtn.style.setProperty("--y", `${e.y - resultContainerBound.top}px`);
+	}else{
+		copyBtn.style.opacity = '0';
+		copyBtn.style.pointerEvents = 'none';
+	}
+});
+window.addEventListener("resize", e => {
+	resultContainerBound = {
+		left: resultContainer.getBoundingClientRect().left,
+		top: resultContainer.getBoundingClientRect().top,
+	};
+});
+
+// Copy Password in clipboard
+copyBtn.addEventListener("click", () => {
+	const textarea = document.createElement("textarea");
+	const password = resultEl.innerText;
+	if (!password || password == "CLICK GENERATE") {
+		return;
+	}
+	textarea.value = password;
+	document.body.appendChild(textarea);
+	textarea.select();
+	document.execCommand("copy");
+	textarea.remove();
+
+	copyInfo.style.transform = "translateY(200%)";
+	copyInfo.style.opacity = "0";
+	copiedInfo.style.transform = "translateY(0%)";
+	copiedInfo.style.opacity = "0.75";
+});
+
+function generateName(){
+	fetch('/generate')
+	.then(response => response.json())
+	.then(data => {
+		resultEl.innerText = data.name;
+	})
+	.catch(error => console.error(error));
+}
+
+// When Generate is clicked Password id generated.
+generateBtn.addEventListener("click", () => {
+
+	const length = +lengthEl.value;
+	generatedPassword = true;
+	copyInfo.style.transform = "translateY(0%)";
+	copyInfo.style.opacity = "0.75";
+	copiedInfo.style.transform = "translateY(200%)";
+	copiedInfo.style.opacity = "0";
+});

app/api/templates/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Name Generator</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+<body>
+    <div>
+        <div class="wave"></div>
+        <div class="wave"></div>
+        <div class="wave"></div>
+
+        <div class="container">
+            <h2 class="title">Name Generator</h2>
+            <div class="result">
+                <div class="result__title field-title">Generated Name</div>
+                <div class="result__info right">click to copy</div>
+                <div class="result__info left">copied</div>
+                <div class="result__viewbox" id="result">CLICK GENERATE</div>
+                <button id="copy-btn" style="--x: 0; --y: 0"><i class="far fa-copy"></i></button>
+            </div>
+            <div class="length range__slider" data-min="4" data-max="32">
+                <div class="length__title field-title" data-length='0'>length:</div>
+                <input id="slider" type="range" min="4" max="32" value="16" />
+            </div>
+        
+            <button onclick="generateName()" class="btn generate" id="generate">Generate Name</button>
+        </div>
+     </div>
+    <script src="{{url_for('static', filename='js/index.js')}}" type="text/javascript"></script>    
+</body>
+</html>

ml-dev/train.py

@@ -0,0 +1,35 @@
+import torch
+import pickle
+
+# Character which represents the start and end of a word
+TOKEN = '.'
+
+# Reading the names into a list
+words = open('data/names.txt','r').read().splitlines()
+
+# Building a vocabulary out of all of the characters we have
+vocab = sorted(list(set(''.join(words)) | {TOKEN}))
+
+# Building a Bigram table which will hold the counts for each of the bigram
+n = len(vocab)
+N = torch.zeros((n,n), dtype = torch.int32)
+
+# Defining a mapping for characters to and from integers
+char_to_int = {char:i for i,char in enumerate(vocab)}
+int_to_char = {value:key for key,value in char_to_int.items()}
+
+# Populating the Bigram table (N) with counts
+for word in words:
+  chars = [TOKEN] + list(word) + [TOKEN]
+  for ch1,ch2 in zip(chars,chars[1:]):
+    ix1 = char_to_int[ch1]
+    ix2 = char_to_int[ch2]
+    N[ix1,ix2] += 1
+
+# Normalise the counts to represent probabilities
+P = N.float()
+P /= P.sum(1, keepdim = True)
+
+# Open a file and use dump()
+with open('model/bigrams.pkl', 'wb') as file:
+    pickle.dump([P,char_to_int,int_to_char], file)