769b3b5c61
with unique url from image service, for now ImageKit On branch development Your branch is up to date with 'origin/development'. Changes to be committed: modified: README.md new file: add new file: git modified: src/modals/ConvertLocalImagesForCurrentFile.ts modified: styles.css |
||
|---|---|---|
| reference | ||
| scripts | ||
| src | ||
| .editorconfig | ||
| .env.example | ||
| .eslintignore | ||
| .eslintrc | ||
| .gitattributes | ||
| .gitignore | ||
| .npmrc | ||
| .windsurfrules.md | ||
| add | ||
| esbuild.config.mjs | ||
| git | ||
| LICENSE | ||
| main.ts | ||
| manifest.json | ||
| package.json | ||
| plugin-config.yaml | ||
| pnpm-lock.yaml | ||
| README.md | ||
| setup-plugin.mjs | ||
| styles.css | ||
| tsconfig.json | ||
| version-bump.mjs | ||
| versions.json | ||
Image Gin for Obsidian
A powerful Obsidian plugin that brings AI-powered image generation directly to your Obsidian workflow. Seamlessly create and manage images using advanced AI models, starting with Recraft's API.
✨ Features
- AI-Powered Image Generation: Create stunning visuals directly from your notes using Recraft's AI models
- Seamless Integration: Works natively within Obsidian's interface
- Flexible Image Types: Generate both banner and portrait images with custom dimensions
- Smart Frontmatter Management: Automatically updates your note's frontmatter with generated image URLs
- Customizable Prompts: Fine-tune image generation with custom styles and parameters
Modals
-
Generate images from an image prompt in your YAML frontmatter.
-
Convert local images in a file to a remote image service url (only supports ImageKit).
Settings
🚀 Getting Started
Prerequisites
- Obsidian (v1.8.10 or later)
- Node.js (v18 or later)
- pnpm (recommended) or npm
Installation
-
Clone the repository:
git clone https://github.com/lossless-group/image-gin-plugin.git cd image-gin-plugin -
Install dependencies:
pnpm install -
Build the plugin:
pnpm build -
For development with hot-reloading:
pnpm dev
🛠️ Configuration
- Get your Recraft API key from Recraft's website
- Open Obsidian and navigate to Settings > Community Plugins
- Find "Image Gin" in the list and enable it
- Click on the gear icon to configure your API key and default settings
🖼️ Usage
- Open a note where you want to generate an image
- Use the command palette (
Cmd/Ctrl+P) and search for "Generate Image" - Enter your image prompt and adjust settings as needed
- Click "Generate" and watch your image come to life
📝 License
This project is open source and available under the The Unlicense.
Getting Started
If you want to use the setup-plugin.mjs script, fill out plugin-config.yaml and then make it an executable file.
chmod +x setup-plugin.mjs
When run, it will create the basic metadata and fill in the template variables. If you don't need it, just delete it and happy hacking.
Run the script with
node setup-plugin.mjs
pnpm install
pnpm add -D esbuild @types/node builtin-modules
pnpm build
pnpm dev
Packages, Dependencies, Libraries:
"devDependencies": {
"@types/node": "^24.0.12",
"@typescript-eslint/eslint-plugin": "8.36.0",
"@typescript-eslint/parser": "8.36.0",
"builtin-modules": "5.0.0",
"esbuild": "0.25.6",
"eslint": "^9.30.1",
"obsidian": "latest",
"tslib": "2.8.1",
"typescript": "5.8.3"
},
"dependencies": {
"@modelcontextprotocol/sdk": "^1.15.0",
"fastify": "^5.4.0",
"zod": "^4.0.0"
}
Using Symbolic Links to Test Your Plugin
If you're like us, you have a directory housing all your code projects. To use your plugin as you develop it, just create a symbolic link. Here is my example, but you will need to use your own path structure:
ln -s /Users/mpstaton/code/lossless-monorepo/obsidian-plugin-starter /Users/mpstaton/content-md/lossless/.obsidian/plugins/