Repurpose Functionality Found Elsewhere into an Obsidian Plugin

Objective

We are implementing the specification Maintain-an-Image-Generator-Obsidian-Plugin phase by phase and step by step.

Immediate Task at Hand

Tasks:

  1. Phase 4: Introduce ImageKit API Settings & Upload Functionality
    • Analyze the working script at ai-labs/apis/imagekit/convertImageToImagkitUrl.cjs
    • Introduce ImageKit API Settings
      • Setting to remove downloaded Recraft Generated images from the download folder but only after successfully uploading to ImageKit with a response object from ImageKit with the unique image URL written to file in place of the Recraft generated image URL.
      • Toggle on Modal for removing downloaded Recraft Generated images for the above, default to the user preference in settings.
    • Update the Code Changelog file.

Expected Deliverables for Task at Hand

  1. Discuss implementation plan after analyzing the working script at ai-labs/apis/imagekit/convertImageToImagkitUrl.cjs
  2. src/settings/SettingsTab.ts file implementing:
    • SettingsTab extends PluginSettingTab
    • SettingsTab includes toggle for removing downloaded Recraft Generated images from the download folder
      • Assures only happens after successfully uploading to ImageKit with a response object from ImageKit with the unique image URL written to file in place of the Recraft generated image URL.
      • Toggle on Modal for removing downloaded Recraft Generated images for the above, default to the user preference in settings.
  3. src/modals/CurrentFileModal.ts file implementing:
    • CurrentFileModal includes toggle for removing downloaded Recraft Generated images from the download folder
      • only happens after successfully uploading to ImageKit with a response object from ImageKit with the unique image URL written to file in place of the Recraft generated image URL.
    • uses yamlFrontmatter.ts to extract the image property values from the frontmatter
    • uses yamlFrontmatter.ts to write the image property values to the frontmatter
    • [] once the above is complete, integrate "progress bar" into the modal to show the progress of the image generation process, including success nodes at
      • Recraft image generations,
      • successful downloads,
      • successful uploads to ImageKit,
      • successful ImageKit response received with unique ImageKit URL,
      • successful writing of the image URL to the frontmatter.
  4. main.ts updates:
    • Necessary updates to main.ts to support the above functionality.
  5. Documentation:
    • Update README.md with setup instructions
    • Add settings description in CHANGELOG.md

Technical Implementation Notes:

  • Use the fileService.ts for all file operations
  • Follow the architecture defined in the specification
  • Refer to how the other projects manage error handling.

Constraints

Do not blindly copy old code. Instead, review the older codebase to identify, discuss and document the parts that are specific to this ask.
Do not bring in functionality with dependencies, references to imports that do not exist, or other parts of the code that will cause problems.
Instead, analyze both
  1. the old code that was required to make it work, and
  2. the new code AS A WHOLE (including related and connected files) to identify how similar functionality in the old code could be implemented in the new code.
Share your analysis first, we need to agree on an implementation plan.

Refer to the Docs Often, Do not Make Assumptions

Always refer back to appropriate documentation, we waste so much time when LLM Code Generators simply follow their own intuition and probabilistic chain of thought. This is an Obsidian Plugin, and they have decent docs at Obsidian Developer Documentation as well as an exhaustive list of every API call that can be made through their TypeScript API.

Refer to our Working Projects Often, Do not Invent Patterns

Refer to our working projects that are in production for:

Open Graph Fetcher

  • Open Graph Fetcher on GitHub
  • on my local: /Users/mpstaton/code/lossless-monorepo/open-graph-fetcher

Cite Wide

  • Cite Wide on GitHub
  • on my local: /Users/mpstaton/code/lossless-monorepo/cite-wide

Nuances of Obsidian Plugins

  1. Obsidian comes with its own Style kit, we don't have to make a lot of normal CSS decisions. Refer to the CSS Variables on the Obsidian Developer Docs
  2. Our goal is to release it as a production Obsidian Community Plugin on the Obsidian Community Plugin Marketplace.
  3. The Obsidian Plugin Marketplace is curated, so the submission has to pass through automated tests and then be reviewed by the plugin marketplace maintainers. The automated dependabot does not like generalized TypeScript hacks. So, be rigorous about declaring and maintaining types.
  4. Our goal is to keep this project Open Source, and to attract other Open Source Contributors. So, thoroughly commenting in code to explain what is happening in the code is extremely valuable.

Create a Memory from these Constraints

Please create a memory and/or other ways of holding these constraints in your memory.

Further Context

Inputs: Old Code

ai-labs/apis/recraft/generate-banner-and-portrait-images-recraft.py ai-labs/apis/imagekit/convertImageToImagkitUrl.cjs

Desired Functionality for v1:

  1. Single File Image Generation
    1. A Command for "Generate Images for Current File" opens a CurrentFileModal
    2. Current file modal can:
      1. Send an image_prompt value to the Recraft API to generate either or both:
        1. banner_image (user can change the default dimensions)
        2. portrait_image (user can change the default dimensions)

Further Development

Desired Functionality for Future Versions

  1. Single File Image Generation
    1. A Command for "Generate Images for Current File" opens a CurrentFileModal
    2. Current file modal can:
      1. Send an image_prompt value to the Recraft API to generate either or both:
        1. banner_image (user can change the default dimensions)
        2. portrait_image (user can change the default dimensions)
      2. Download selected urls pointing to images on remote servers to a target directory.
        1. Store the downloaded image or images locally where downloaded.
        2. Move the downloaded image or images to another directory according to a path set in the modal.
        3. Use the download only as a temporary file to send to an image delivery service
      3. Upload the image that was generated and downloaded to an image delivery service via API, write the image
        1. If writing into YAML, uses the user settings or the modal input and the write gets the yaml correct syntax and DOES NOT RUIN ANY OTHER YAML PROPERTIES.
        2. If writing into the content, uses Obsidian embed syntax, ![Descriptive Text or Image Name](<image_delivery_unique_url>)
      4. Scan the file for image embeds stored locally, send them to an image delivery service, and replace the local image embed with a remote image embed, using the appropriate sytnax changes:
        1. from ![[Visuals/Screenshots/Screenshot 2025-01-20 at 1.46.38 PM_Airtable-Copilot.png]]
        2. to ![Screenshot 2025-01-20 at 1.46.38 PM of Airtable Copilot](<remote_image_delivery_unique_url>)