workshop: files

.gitignore

@@ -1,2 +1,5 @@
 NodeJs/code/nodejs-app/.env
-NodeJs/code/simple-nodejs-app/node_modules
+node_modules/
+
+# Lock files
+package-lock.json

Docker/code/Dockerfile

@@ -1,3 +1,3 @@
-# FROM nginx:1.23.0-alpine
-# COPY /public /usr/share/nginx/html
-# CMD ["nginx", "-g", "daemon off;"]
+FROM nginx:1.23.0-alpine
+COPY /public /usr/share/nginx/html
+CMD ["nginx", "-g", "daemon off;"]

Docker/code/docker-compose.yml

@@ -1,11 +1,11 @@
-# version: '3.7'
-# services:
-#   webserver:
-#     build: 
-#       context: .
-#       dockerfile: docker/Dockerfile
-#     container_name: webserver
-#     ports:
-#       - 9000:80
-#     volumes:
-#       - ./public:/usr/share/nginx/html
+version: '3.7'
+services:
+  webserver:
+    build: 
+      context: .
+      dockerfile: docker/Dockerfile
+    container_name: webserver
+    ports:
+      - 9000:80
+    volumes:
+      - ./public:/usr/share/nginx/html

Docker/code/docker/Dockerfile

@@ -0,0 +1,3 @@
+FROM nginx:1.23.0-alpine
+COPY /public /usr/share/nginx/html
+CMD ["nginx", "-g", "daemon off;"]

Git/index.html

@@ -0,0 +1 @@
+<p>hii</p>

Git/test.txt

@@ -0,0 +1 @@
+hello there, hey again

NodeJs/code/nodejs-app/index.js

@@ -1,25 +1,83 @@
 // imports
-const { response, json } = require('express');
-const express = require('express');
-const request = require('request');
-const wikip = require('wiki-infobox-parser');
-const dotenv = require('dotenv')
-const axios = require('axios');
+const { response, json } = require("express");
+const express = require("express");
+const request = require("request");
+const wiki = require("wikipedia");
+const dotenv = require("dotenv");
+const axios = require("axios");
+const { URL } = require("node:url");
+
+async function generateImage({ prompt, size = "256x256", n = 1 }) {
+  return await axios
+    .post(
+      "https://api.openai.com/v1/images/generations",
+      JSON.stringify({
+        prompt,
+        n,
+        size,
+      }),
+      {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${process.env.CHAT_GPT_API_KEY}`,
+        },
+      }
+    )
+    .then(function (response) {
+      return response.data.data[0].url;
+    })
+    .catch(function (error) {
+      console.log(`Image genrator failed with the error: ${error}`);
+      return "";
+    });
+}
 
 //Initializing Express for creating Server
 const app = express();
 //Configuring env
 dotenv.config();
-//Static Resources 
+//Static Resources
 app.use("/static", express.static(__dirname + "/static/"));
 //Setting up the View Engine
-app.set("view engine", 'ejs');
+app.set("view engine", "ejs");
 
 //Dashboard route here
+app.get("/", (req, res) => {
+  res.render("dashboard");
+});
 
 //Nasa route here
+app.get("/nasa", (req, res) => {
+  (async () => {
+    const url = new URL("https://api.nasa.gov/planetary/apod");
+    url.searchParams.append("api_key", process.env.API_KEY);
+    const response = await axios.get(url.href);
+    res.render("nasa", { data: response.data });
+  })();
+});
 
 //Search route here
+app.get("/search", async (req, response) => {
+  if (req.originalUrl === "/search") {
+    response.render("search");
+    return;
+  }
+  const query = req.originalUrl.split("=")[1];
+  const page = await wiki.page(query);
+  const summary = await page.summary();
+  response.render("details", { data: summary });
+});
+
+// chatgpt route here
+app.get("/chatgpt", async (req, res) => {
+  if (req.originalUrl === "/chatgpt") {
+    res.render("chatgpt");
+    return;
+  }
+  const prompt = req.originalUrl.split("=")[1];
+  const image = await generateImage({ prompt });
+  res.render("image", { data: { image: image, title: prompt } });
+});
 
 //Starting the server
-app.listen(6004, console.log("Listening at port 6004..."));
+app.listen(6004, console.log("Listening at port 6004..."));

NodeJs/code/nodejs-app/package.json

@@ -7,7 +7,7 @@
     "start": "nodemon index.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "private":"true",
+  "private": "true",
   "dependencies": {
     "axios": "^0.19.2",
     "dotenv": "^16.0.3",
@@ -16,6 +16,7 @@
     "node-fetch": "^2.6.7",
     "nodemon": "^2.0.3",
     "request": "^2.88.2",
-    "wiki-infobox-parser": "^0.1.11"
+    "wiki-infobox-parser": "^0.1.11",
+    "wikipedia": "^2.0.0"
   }
 }

NodeJs/code/nodejs-app/views/chatgpt.ejs

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>UniCourt Workshop1 - OpenAI Image Generation</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="/static/style.css" />
+  </head>
+  <body>
+    <div class="container-fluid">
+      <div class="container mt-50">
+        <div class="row">
+          <h1 class="mt-50 mb-50 t-center">OpenAI Image Generation</h1>
+          <div class="d-flex1">
+            <form action="/chatgpt" method="GET" class="d-flex m-h50">
+              <input
+                type="text"
+                class="form-control"
+                placeholder="Prompt"
+                name="prompt"
+              />
+              <input
+                class="input-group-text search-btn p0-p40"
+                id="inputGroup-sizing-lg"
+                type="submit"
+                value="Generate"
+              />
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>

NodeJs/code/nodejs-app/views/dashboard.ejs

@@ -16,7 +16,8 @@
           <h1 class="mt-50 mb-50">Welcome To Node Workshop</h1>
           <div class="d-flex justify-content-center align-items-center">
             <a type="submit" class="btn btn-secondary add me-2" href="/nasa">NASA API Call</a>
-            <a type="submit" class="btn btn-secondary add" href="/search">Wiki Search</a>
+            <a type="submit" class="btn btn-secondary add me-2" href="/search">Wiki Search</a>
+            <a type="submit" class="btn btn-secondary add" href="/chatgpt">Generate Image using OpenAI</a>
           </div>
          </div>
         </div>

NodeJs/code/nodejs-app/views/details.ejs

@@ -1,32 +1,50 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>UniCourt Workshop1 - Search Result</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
-    <link rel="stylesheet" href="static/style.css">
-
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>UniCourt Workshop1 - Nasa</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="/static/style.css" />
   </head>
-  <body>     
+  <body>
+    <div class="container-fluid">
       <div class="container mt-50">
-
         <div class="row align-items-start">
-            <div class="table-head mt-5 mb-5">
-                <h5 class="mt-3">Search Term: <%= data.person %></h5>
+          <div class="table-head mb-5">
+            <h5><%= data.title %> Details</h5>
+          </div>
+          <div class="col-4 pl-0">
+            <div>
+              <picture>
+                <img
+                  src="<%= data.thumbnail.source %>"
+                  class="img-fluid img-thumbnail"
+                  width="400px"
+                  height="500px"
+                />
+              </picture>
             </div>
-            <div class="col-2 pl-0">
-                <div>
-                    <h5 class="mt-3">Search Result:</h5>
-                </div>
-            </div>
-            <div class="col-10 pr-0">
-                <pre><%= JSON.stringify(data,undefined,2) %></pre>
+          </div>
+          <div class="col-8 pr-0">
+            <div class="cust-card">
+              <p><b> <%= data.title %></b></p>
+              <p>Explanation: <%= data.extract %></p>
             </div>
+          </div>
+          <a type="submit" class="btn btn-secondary add" href="/">Back</a>
         </div>
-        <a type="submit" class="btn btn-secondary add" href="/">Back</a>
       </div>
-
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
+    </div>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
+      crossorigin="anonymous"
+    ></script>
   </body>
-</html>
+</html>

NodeJs/code/nodejs-app/views/image.ejs

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>UniCourt Workshop1 - Nasa</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="/static/style.css" />
+  </head>
+  <body>
+    <div class="container-fluid">
+      <div class="container mt-50">
+        <div class="row align-items-start">
+          <div class="table-head mb-5">
+            <h5><%= data.title %> Image</h5>
+          </div>
+          <div class="col-4 pl-0">
+            <picture>
+              <img
+                src="<%= data.image %>"
+                class="img-fluid img-thumbnail"
+                width="400px"
+                height="500px"
+              />
+            </picture>
+          </div>
+          <a type="submit" class="btn btn-secondary add" href="/">Back</a>
+        </div>
+      </div>
+    </div>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>