ai-frame-image-server/templates/settings.html

{% extends "base.html" %}

{% block title %}Config Editor{% endblock %}

{% block head %}
  <style>
    body {
      min-height: 100vh;
      padding: 40px 20px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .box {
      background: #1a1a1a;
      padding: 20px;
      border-radius: 12px;
      width: 45%;
      min-width: 300px;
      margin-bottom: 20px;
    }

    h2 {
      margin-bottom: 20px;
      font-size: 24px;
    }

    form {
      margin-bottom: 20px;
    }

    select,
    input[type="text"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      font-size: 16px;
      border-radius: 6px;
      border: none;
      outline: none;
    }

    button {
      width: 100%;
      background: #333;
      color: white;
      text-decoration: none;
      padding: 10px;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s;
      border: none;
    }

    button:hover {
      background: #555;
    }

    .button-group {
      text-align: center;
      margin-top: 20px;
    }

    .back-button-wrapper {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    @media (max-width: 768px) {
      body {
        flex-direction: column;
        align-items: center;
      }

      .box {
        width: 90%;
        margin-bottom: 30px;
      }
    }
  </style>
{% endblock %}

{% block content %}
  <div class="box">
    <h2>Topics</h2>
    <form method="post">
      <select name="delete_topic">
        {% for item in topics %}
        <option value="{{ item }}">{{ item }}</option>
        {% endfor %}
      </select>
      <button name="delete_topic" type="submit">Delete Selected Topic</button>
    </form>

    <form method="post">
      <input type="text" name="new_topic" placeholder="New topic">
      <button name="new_topic" type="submit">Add Topic</button>
    </form>
  </div>

  <div class="box">
    <h2>Models</h2>
    <form method="post">
      <select name="delete_model">
        {% for item in models %}
        <option value="{{ item }}">{{ item }}</option>
        {% endfor %}
      </select>
      <button name="delete_model" type="submit">Delete Selected Model</button>
    </form>

    <form method="post">
      <input type="text" name="new_model" placeholder="New model">
      <button name="new_model" type="submit">Add Model</button>
    </form>
  </div>
  <div class="box" style="width: 100%;">
    <h2>Config Values</h2>
    <form method="post" style="display:flex; flex-wrap:wrap; justify-content:space-between;">
      {% for section in config_sections %}
      <div class="box">
        <h2>[{{ section }}]</h2>
        {% for key, value in config_values[section].items() %}
        <label>{{ key }}</label>
        {% if value.lower() in ['true', 'false'] %}
        <select name="{{ section }}:{{ key }}">
          <option value="True" {% if value.lower()=='true' %}selected{% endif %}>True</option>
          <option value="False" {% if value.lower()=='false' %}selected{% endif %}>False</option>
        </select>
        {% else %}
        {% if key in ['password_for_auth', 'api_key'] %}
        <input type="text" name="{{ section }}:{{ key }}" value="********" placeholder="********">
        {% elif value.lower() in ['true', 'false'] %}
        <select name="{{ section }}:{{ key }}">
          <option value="True" {% if value.lower()=='true' %}selected{% endif %}>True</option>
          <option value="False" {% if value.lower()=='false' %}selected{% endif %}>False</option>
        </select>
        {% else %}
        <input type="text" name="{{ section }}:{{ key }}" value="{{ value }}">
        {% endif %}

        {% endif %}

        {% endfor %}
      </div>
      {% endfor %}
      <div class="box" style="width: 100%;">
        <button type="submit">Save Config</button>
      </div>
    </form>
  </div>

  <div class="back-button-wrapper">
    <a href="/" class="button-link">Back to Home</a>
  </div>
{% endblock %}