Add Code Image Generator project code

Author: acsany

code-image-generator/source_code_final/app.py

@@ -0,0 +1,87 @@
+import base64
+
+from flask import Flask, render_template, session, request, redirect, url_for
+from pygments import highlight
+from pygments.formatters import HtmlFormatter
+from pygments.lexers import Python3Lexer
+from pygments.styles import get_all_styles
+
+from utils import take_screenshot
+
+app = Flask(__name__)
+app.secret_key = "mysecretkey"
+
+PLACEHOLDER_CODE = "print('Hello, World!')"
+DEFAULT_STYLE = "monokai"
+NO_CODE_FALLBACK = "# No Code Entered"
+
+
+@app.route("/", methods=["GET"])
+def code():
+    if session.get("code") is None:
+        session["code"] = PLACEHOLDER_CODE
+    lines = session["code"].split("\n")
+    context = {
+        "message": "Paste Your Python Code 🐍",
+        "code": session["code"],
+        "num_lines": len(lines),
+        "max_chars": len(max(lines, key=len)),
+    }
+    return render_template("code_input.html", **context)
+
+
+@app.route("/save_code", methods=["POST"])
+def save_code():
+    session["code"] = request.form.get("code") or NO_CODE_FALLBACK
+    return redirect(url_for("code"))
+
+
+@app.route("/reset_session", methods=["GET"])
+def reset_session():
+    session.clear()
+    session["code"] = PLACEHOLDER_CODE
+    return redirect(url_for("code"))
+
+
+@app.route("/save_style", methods=["POST"])
+def save_style():
+    if request.form.get("style") is not None:
+        session["style"] = request.form.get("style")
+    if request.form.get("code") is not None:
+        session["code"] = request.form.get("code") or NO_CODE_FALLBACK
+    return redirect(url_for("style"))
+
+
+@app.route("/style", methods=["GET"])
+def style():
+    if session.get("style") is None:
+        session["style"] = DEFAULT_STYLE
+    formatter = HtmlFormatter(style=session["style"])
+    context = {
+        "message": "Select Your Style 🎨",
+        "code": session["code"],
+        "all_styles": list(get_all_styles()),
+        "style": session["style"],
+        "style_bg_color": formatter.style.background_color,
+        "style_definitions": formatter.get_style_defs(),
+        "highlighted_code": highlight(
+            session["code"], Python3Lexer(), formatter
+        ),
+    }
+    return render_template("style_selection.html", **context)
+
+
+@app.route("/image", methods=["GET"])
+def image():
+    session_dict = {
+        "name": app.config["SESSION_COOKIE_NAME"],
+        "value": request.cookies.get(app.config["SESSION_COOKIE_NAME"]),
+        "url": request.host_url,
+    }
+    target_url = request.host_url + url_for("style")
+    image_bytes = take_screenshot(target_url, session_dict)
+    context = {
+        "message": "Done! 🎉",
+        "image_b64": base64.b64encode(image_bytes).decode("utf-8"),
+    }
+    return render_template("image.html", **context)

code-image-generator/source_code_final/requirements.txt

@@ -0,0 +1,3 @@
+Flask==2.3.2
+playwright==1.35.0
+Pygments==2.15.1

code-image-generator/source_code_final/static/styles.css

@@ -0,0 +1,72 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: sans-serif;
+    font-size: 20px;
+    line-height: 1.3em;
+}
+
+main {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}
+
+h1 {
+    font-size: 2em;
+    text-align: center;
+    line-height: 1em;
+}
+
+h1 a {
+    text-decoration: none;
+    color: inherit;
+}
+
+span {
+    color: deepskyblue;
+}
+
+button,
+select {
+    cursor: pointer;
+    font-size: 100%;
+    margin: 0.25em;
+    min-width: 8em;
+}
+
+.controls {
+    margin: 1em 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+
+}
+
+.code {
+    font-family: monospace;
+    box-shadow: #767676 0px 20px 30px -10px;
+    border-radius: 0.5em;
+    padding: 1em 2em;
+    min-width: 32em;
+    max-width: 100%;
+    min-height: 12em;
+    text-align: left;
+    border: 1px solid #cecece;
+    margin: 1em;
+    line-height: 1.4em;
+}
+
+.code_picture {
+    text-align: center;
+}
+
+img {
+    margin: 1em 0;
+    border: 1px solid #cecece;
+    max-width: 80%;
+    padding: 1em;
+}

code-image-generator/source_code_final/templates/base.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title>
+      Code to Image {% block title %}{% endblock %}
+    </title>
+    <link rel="stylesheet"
+          type="text/css"
+          href="{{ url_for('static', filename='styles.css') }}"/>
+  </head>
+  <body>
+    <h1>
+      <a href="{{ url_for('code') }}">Code to Image</a>: <span>{{ message }}</span>
+    </h1>
+    <main>
+      {% block content %}
+      {% endblock content %}
+    </main>
+  </body>
+</html>

code-image-generator/source_code_final/templates/code_input.html

@@ -0,0 +1,28 @@
+{% extends "base.html" %}
+{% block title %}
+  - Code Input
+{% endblock title %}
+{% block content %}
+<style>
+  .code {
+    min-height: calc({{ num_lines }}em * 1.5 + 2 * 1em);
+    min-width: calc({{ max_chars }}ch + 4 * 2em);
+  }
+</style>
+<form>
+  <textarea class="code"
+            name="code"
+            placeholder="Paste your Python code here">{{ code }}</textarea>
+  <div class="controls">
+    <button formmethod="get" formaction="{{ url_for("reset_session") }}">
+      Reset Session ♻️
+    </button>
+    <button formmethod="post" formaction="{{ url_for("save_code") }}">
+      Save Code 💾
+    </button>
+    <button formmethod="post" formaction="{{ url_for("save_style") }}">
+      Next ➡️
+    </button>
+  </div>
+</form>
+{% endblock content %}

code-image-generator/source_code_final/templates/image.html

@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+{% block title %}
+  - Your Image
+{% endblock title %}
+{% block content %}
+<form>
+  {% if image_b64 %}
+    <div class="code_picture">
+      <img src="data:image/png;base64,{{ image_b64 | safe }}"
+           alt="Code Image" />
+    </div>
+    <a href="data:image/png;base64,{{ image_b64 | safe }}"
+         download="Your_CodeImage.png">
+        Download Your Code Image ⤵️
+      </a>
+  {% endif %}
+  <div class="controls">
+    <button formmethod="get" formaction="{{ url_for("code") }}">
+      🔄 Back to Start
+    </button>
+  </div>
+</form>
+{% endblock content %}

code-image-generator/source_code_final/templates/style_selection.html

@@ -0,0 +1,43 @@
+{% extends "base.html" %}
+{% block title %}
+  - Style Selection
+{% endblock title %}
+{% block content %}
+<style>
+  {{ style_definitions }}
+
+  .code {
+    background-color: {{ style_bg_color }};
+  }
+</style>
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    document.querySelector("select").addEventListener("change", () => {
+      document.querySelector("form").submit();
+    });
+  });
+</script>
+<form method="post" action="{{ url_for("save_style") }}">
+  <div class="controls">
+    <select name="style">
+        {% for style_name in all_styles %}
+          <option value="{{ style_name }}"
+                {% if style_name == style %}selected{% endif %}>
+            {{ style_name }}
+            </option>
+        {% endfor %}
+    </select>
+  </div>
+  <div class="code">
+    {{ highlighted_code | safe }}
+  </div>
+  <div class="controls">
+    <button formmethod="get" formaction="{{ url_for("code") }}">
+      ⬅️ Back
+    </button>
+    <button formmethod="get" formaction="{{ url_for("image") }}">
+      Create Image 📸
+    </button>
+  </div>
+</form>
+{% endblock content %}

code-image-generator/source_code_final/utils.py

@@ -0,0 +1,14 @@
+from playwright.sync_api import sync_playwright
+
+
+def take_screenshot(target, session_dict):
+    with sync_playwright() as playwright:
+        webkit = playwright.webkit
+        browser = webkit.launch()
+        browser_context = browser.new_context(device_scale_factor=2)
+        browser_context.add_cookies([session_dict])
+        page = browser_context.new_page()
+        page.goto(target)
+        screenshot_bytes = page.locator(".code").screenshot()
+        browser.close()
+        return screenshot_bytes

code-image-generator/source_code_step_01/app.py

@@ -0,0 +1,11 @@
+from flask import Flask, render_template
+
+app = Flask(__name__)
+
+
+@app.route("/", methods=["GET"])
+def code():
+    context = {
+        "message": "Paste Your Python Code 🐍",
+    }
+    return render_template("code_input.html", **context)

code-image-generator/source_code_step_01/requirements.txt

@@ -0,0 +1,3 @@
+Flask==2.3.2
+playwright==1.35.0
+Pygments==2.15.1