fe1a03fac7
* Add AI Artist layer * WIP add a button to download the rendered folder under an AI Artist layer * Successfully download the correct image * Break out image downloading JS into helper function * Change file download from using data URLs to blob URLs * WIP rasterize to blob * Remove dimensions from AI Artist layer * Successfully draw rasterized image on layer after calculation * Working txt2img generation based on user prompt * Add img2img and the main parameters * Fix ability to rasterize multi-depth documents with blob URL images by switching them to base64 * Fix test * Rasterize with artboard background color * Allow aspect ratio stretch of AI Artist images * Add automatic resolution choosing * Add a terminate button, and make the lifecycle more robust * Add negative prompt * Add range bounds for parameter inputs * Add seed * Add tiling and restore faces * Add server status check, server hostname customization, and resizing layer to fit AI Artist resolution * Fix background color of infinite canvas rasterization * Escape prompt text sent in the JSON * Revoke blob URLs when cleared/replaced to reduce memory leak * Fix welcome screen logo color * Add PreferencesMessageHandler * Add persistent storage of preferences * Fix crash introduced in previous commit when moving mouse on page load * Add tooltips to the AI Artist layer properties * Integrate AI Artist tool into the raster section of the tool shelf * Add a refresh button to the connection status * Fix crash when generating and switching to a different document tab * Add persistent image storage to AI Artist layers and fix duplication bugs * Add a generate with random seed button * Simplify and standardize message names * Majorly improve robustness of networking code * Fix race condition causing default server hostname to show disconnected when app loads with AI Artist layer selected (probably, not confirmed fixed) * Clean up messages and function calls by changing arguments into structs * Update API to more recent server commit * Add support for picking the sampling method * Add machinery for filtering selected layers with type * Replace placeholder button icons * Improve the random icon by tilting the dice * Use selected_layers() instead of repeating that code * Fix borrow error * Change message flow in progress towards fixing #797 * Allow loading image on non-active document (fixes #797) * Reduce code duplication with rasterization * Add AI Artist tool and layer icons, and remove ugly node layer icon style * Rename "AI Artist" codename to "Imaginate" feature name Co-authored-by: otdavies <oliver@psyfer.io> Co-authored-by: 0hypercube <0hypercube@gmail.com> |
||
|---|---|---|
| .. | ||
| assets | ||
| public | ||
| src | ||
| wasm | ||
| .eslintrc.js | ||
| .gitignore | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| vue-svg-loader.js | ||
| vue.config.js | ||
Overview of /frontend/
The Graphite frontend is a web app that provides the presentation for the editor. It displays the GUI based on state from the backend and provides users with interactive widgets that send updates to the backend, which is the source of truth for state information. The frontend is built out of reactive components using the Vue framework. The backend is written in Rust and compiled to WebAssembly (WASM) to be run in the browser alongside the JS code.
For lack of other options, the frontend is currently written as a web app. Maintaining web compatibility will always be a requirement, but the long-term plan is to port this code to a Rust-based native GUI framework, either written by the Rust community or created by our project if necessary. As a medium-term compromise, we may wrap the web-based frontend in a desktop webview windowing solution like Electron (probably not) or Tauri (probably).
Bundled assets: assets/
Icons and images that are used in components and embedded into the application bundle by the build system using loaders.
Public assets: public/
Static content like favicons that are copied directly into the root of the build output by the build system.
Vue/TypeScript source: src/
Source code for the web app in the form of Vue components and TypeScript files.
WebAssembly wrapper: wasm/
Wraps the editor backend codebase (/editor) and provides a JS-centric API for the web app to use unburdened by Rust's complex data types that are incompatible with JS data types. Bindings (JS functions that call into the WASM module) are provided by wasm-bindgen in concert with wasm-pack.
ESLint configurations: .eslintrc.js
ESLint is the tool which enforces style rules on the JS, TS, and Vue files in our frontend codebase. As it is set up in this config file, ESLint will complain about bad practices and often help reformat code automatically when (in VS Code) the file is saved or npm run lint is executed. (If you don't use VS Code, remember to run this command before committing!) This config file for ESLint sets our style preferences and configures our usage of extensions/plugins for Vue support, Airbnb's popular catalog of sane defaults, and Prettier's role as a code formatter.
npm ecosystem packages: package.json
While we don't use Node.js as a JS-based server, we do have to rely on its wide ecosystem of packages for our build system toolchain. If you're just getting started, make sure to install the latest LTS copy of Node.js and then run cd frontend && npm install to install these packages on your system. Our project's philosophy on third-party packages is to keep our dependency tree as light as possible, so adding anything new to our package.json should have overwhelming justification. Most of the packages are just development tooling (TypeScript, Vue CLI, ESLint, Prettier, wasm-pack, and Sass) that run in your console during the build process.
npm package installed versions: package-lock.json
Specifies the exact versions of packages installed in the npm dependency tree. While package.json specifies which packages to install and their minimum/maximum acceptable version numbers, package-lock.json represents the exact versions of each dependency and sub-dependency. Running npm install will grab these exact versions to ensure you are using the same packages as everyone else working on Graphite. npm update will modify package-lock.json to specify newer versions of any updated (sub-)dependencies and download those, as long as they don't exceed the maximum version allowed in package.json. To check for newer versions that exceed the max version, run npm outdated to see a list. Unless you know why you are doing it, try to avoid committing updates to package-lock.json by mistake if your code changes don't pertain to package updates. And never manually modify the file.
TypeScript configurations: tsconfig.json
Basic configuration options for the TypeScript build tool to do its job in our repository.
vue-svg-loader.js
An extremely simple Webpack loader that allows us to import SVG files into our JS to be used like they are Vue components. They end up as inline SVG elements in the web page like <svg ...>...</svg>, rather than being <img src="..." /> elements, which provides some benefits like being able to apply CSS styles to them. These get embedded into the bundle (they live somewhere all together in a big, messy JS file) rather than being separate static SVG files that would have to be served individually.
Vue CLI/Webpack configurations: vue.config.js
Vue CLI is a command line tool built around the Webpack bundler/build system. This file is where we configure Webpack to set up plugins (like wasm-pack and license-checker) and loaders (like for Vue and SVG files). Part of the license-checker plugin setup includes some functions to format web package licenses, as well as Rust package licenses provided by cargo-about, into a text file that's distributed with the application to provide license notices for third-party code.