Merge pull request #411 from realpython/code-image-generator

Add materials for the Code Image Generator tutorial

Author: KateFinegan

code-image-generator/README.md

@@ -0,0 +1,68 @@
+# Build a Code Image Generator with Flask, Pygments, and Playwright
+
+Follow the [step-by-step instructions](https://realpython.com/python-code-image-generator/) on Real Python.
+
+## Setup
+
+You can run the provided example project on your local machine by following the steps outlined below.
+
+Create a new virtual environment:
+
+```bash
+python3 -m venv venv/
+```
+
+Activate the virtual environment:
+
+```bash
+source ./venv/bin/activate
+```
+
+Navigate to the folder for the step that you're currently on.
+
+Install the dependencies for this project if you haven't installed them yet:
+
+```bash
+(venv) $ python -m pip install -r requirements.txt
+```
+
+Next, you need to install Playwright:
+
+```bash
+(venv) $  playwright install
+```
+
+Finally, run the Flask development server
+
+```bash
+(venv) $ python -m flask run
+```
+
+Now you can navigate to the address that's shown in the output when you start the server. Commonly, that's `http://localhost:5000/`.
+
+## Secret Key
+
+If you want to deploy your Flask app later, then it's a good idea to generate a proper secret key.
+
+If you need to create cryptographically sound data like a Flask secret key, then you can use Python's [`secrets`](https://docs.python.org/3/library/secrets.html) module:
+
+```pycon
+>>> import secrets
+>>> secrets.token_hex()
+'2e9ac41b1e0b66a8d93d66400e2300c4b4c2953f'
+```
+
+The `.token_hex()` method returns a [hexadecimal](https://en.wikipedia.org/wiki/Hexadecimal) string containing random numbers and letters from `0` to `9` and `a` to `f`. Use the value that `secrets.token_hex()` outputs for you and add it to your Flask project's `app.py` file:
+
+```python hl_lines="6"
+# app.py
+
+from flask import Flask, render_template
+
+app = Flask(__name__)
+app.secret_key = "2e9ac41b1e0b66a8d93d66400e2300c4b4c2953f"
+
+# ...
+```
+
+To avoid saving the secret key directly in your code, it may be a good idea to work with [environment variables](https://12factor.net/config). You can learn more about that in the Flask documentation on [configuration handling](https://flask.palletsprojects.com/en/2.3.x/config/).

code-image-generator/source_code_final/app.py

@@ -0,0 +1,93 @@
+import base64
+from flask import (
+    Flask,
+    redirect,
+    render_template,
+    request,
+    session,
+    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_from_url
+
+app = Flask(__name__)
+app.secret_key = (
+    "AddYourSecretKeyHere"  # See the README.md file for instructions
+)
+
+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=["POST"])
+def reset_session():
+    session.clear()
+    session["code"] = PLACEHOLDER_CODE
+    return redirect(url_for("code"))
+
+
+@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 🎨",
+        "all_styles": list(get_all_styles()),
+        "style": session["style"],
+        "style_definitions": formatter.get_style_defs(),
+        "style_bg_color": formatter.style.background_color,
+        "highlighted_code": highlight(
+            session["code"], Python3Lexer(), formatter
+        ),
+    }
+    return render_template("style_selection.html", **context)
+
+
+@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("/image", methods=["GET"])
+def image():
+    session_data = {
+        "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_from_url(target_url, session_data)
+    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,71 @@
+* {
+    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;
+}
+
+.code-picture 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,24 @@
+<!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 %}
+    </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,30 @@
+{% 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,25 @@
+{% 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,45 @@
+{% 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_from_url(url, session_data):
+    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_data])
+        page = browser_context.new_page()
+        page.goto(url)
+        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)