notes-to-strapi-export-article-ai 1.0.11 → 1.0.13

package/src/utils/image-processor.ts

@@ -0,0 +1,426 @@
+import { App, MarkdownView, Notice, TFile, TFolder } from 'obsidian'
+import { OpenAI } from 'openai'
+import { StrapiExporterSettings } from '../types/settings'
+import {
+	uploadGalleryImagesToStrapi,
+	uploadImagesToStrapi,
+} from './strapi-uploader'
+import { generateArticleContent, getImageDescription } from './openai-generator'
+import { ImageBlob } from '../types/image'
+
+/**
+ * Process the markdown content
+ * @param app
+ * @param settings
+ * @param useAdditionalCallAPI
+ */
+export async function processMarkdownContent(
+	app: App,
+	settings: StrapiExporterSettings,
+	useAdditionalCallAPI = false
+) {
+	const activeView = app.workspace.getActiveViewOfType(MarkdownView)
+	if (!activeView) {
+		new Notice('No active Markdown view')
+		return
+	}
+
+	/** ****************************************************************************
+	 * Check if all the settings are configured
+	 * *****************************************************************************
+	 */
+	if (!settings.strapiUrl || !settings.strapiApiToken) {
+		new Notice(
+			'Please configure Strapi URL and API token in the plugin settings'
+		)
+		return
+	}
+
+	if (!settings.openaiApiKey) {
+		new Notice('Please configure OpenAI API key in the plugin settings')
+		return
+	}
+
+	if (useAdditionalCallAPI) {
+		if (!settings.additionalJsonTemplate) {
+			new Notice(
+				'Please configure the additional call api JSON template in the plugin settings'
+			)
+			return
+		}
+
+		if (!settings.additionalJsonTemplateDescription) {
+			new Notice(
+				'Please configure the additional call api JSON template description in the plugin settings'
+			)
+			return
+		}
+
+		if (!settings.additionalUrl) {
+			new Notice(
+				'Please configure the additional call api URL in the plugin settings'
+			)
+			return
+		}
+
+		if (!settings.additionalContentAttributeName) {
+			new Notice(
+				'Please configure the additional call api content attribute name in the plugin settings'
+			)
+			return
+		}
+	} else {
+		if (!settings.jsonTemplate) {
+			new Notice('Please configure JSON template in the plugin settings')
+			return
+		}
+
+		if (!settings.jsonTemplateDescription) {
+			new Notice(
+				'Please configure JSON template description in the plugin settings'
+			)
+			return
+		}
+
+		if (!settings.strapiArticleCreateUrl) {
+			new Notice(
+				'Please configure Strapi article create URL in the plugin settings'
+			)
+			return
+		}
+
+		if (!settings.strapiContentAttributeName) {
+			new Notice(
+				'Please configure Strapi content attribute name in the plugin settings'
+			)
+			return
+		}
+	}
+
+	new Notice('All settings are ok, processing Markdown content...')
+
+	// Initialize OpenAI API
+	const openai = new OpenAI({
+		apiKey: settings.openaiApiKey,
+		dangerouslyAllowBrowser: true,
+	})
+
+	/** ****************************************************************************
+	 * Process the markdown content
+	 * *****************************************************************************
+	 */
+	const file = activeView.file
+	let content = ''
+	if (!file) {
+		new Notice('No file found in active view...')
+		return
+	}
+
+	/** ****************************************************************************
+	 * Check if the content has any images to process
+	 * *****************************************************************************
+	 */
+	let imageBlob: ImageBlob | null = null
+	let galleryUploadedImageIds: number[] = []
+	const articleFolderPath = file.parent?.path
+	const imageFolderPath = `${articleFolderPath}/image`
+	const galleryFolderPath = `${articleFolderPath}/gallery`
+	const imageMetadataFile = `${articleFolderPath}/image/metadata.json`
+	const galleryMetadataFile = `${articleFolderPath}/gallery/metadata.json`
+
+	// Check if metadata files exist
+	if (await app.vault.adapter.exists(imageMetadataFile)) {
+		const imageMetadata = JSON.parse(
+			await app.vault.adapter.read(imageMetadataFile)
+		)
+		if (Object.keys(imageMetadata).length > 0) {
+			imageBlob = {
+				path: imageMetadata[Object.keys(imageMetadata)[0]].data.url,
+				blob: new Blob(),
+				name: Object.keys(imageMetadata)[0],
+				id: imageMetadata[Object.keys(imageMetadata)[0]].id,
+			}
+		}
+	}
+
+	if (await app.vault.adapter.exists(galleryMetadataFile)) {
+		const galleryMetadata = JSON.parse(
+			await app.vault.adapter.read(galleryMetadataFile)
+		)
+		if (Object.keys(galleryMetadata).length > 0) {
+			galleryUploadedImageIds = Object.values(galleryMetadata).map(
+				(item: any) => item.data.id
+			)
+		}
+	}
+
+	// If metadata doesn't exist, get image blobs and upload to Strapi
+	if (!imageBlob) {
+		imageBlob = await getImageBlob(app, imageFolderPath)
+		if (imageBlob) {
+			const imageDescription = await getImageDescription(imageBlob.blob, openai)
+			const uploadedImage: any = await uploadImagesToStrapi(
+				[{ ...imageBlob, description: imageDescription }],
+				settings,
+				app,
+				imageFolderPath
+			)
+			imageBlob.path = uploadedImage[imageBlob.name].url
+			imageBlob.id = uploadedImage[imageBlob.name].id
+		}
+	}
+
+	if (galleryUploadedImageIds.length === 0) {
+		const galleryImageBlobs = await getGalleryImageBlobs(app, galleryFolderPath)
+		galleryUploadedImageIds = await uploadGalleryImagesToStrapi(
+			galleryImageBlobs,
+			settings,
+			app,
+			galleryFolderPath
+		)
+	}
+
+	content = await app.vault.read(file)
+
+	const flag = hasUnexportedImages(content)
+
+	/** ****************************************************************************
+	 * Process the images
+	 * *****************************************************************************
+	 */
+	if (flag) {
+		const imagePaths = extractImagePaths(content)
+		const imageBlobs = await getImageBlobs(app, imagePaths)
+
+		new Notice('Getting image descriptions...')
+		const imageDescriptions = await Promise.all(
+			imageBlobs.map(async imageBlob => {
+				const description = await getImageDescription(imageBlob.blob, openai)
+				return {
+					blob: imageBlob.blob,
+					name: imageBlob.name,
+					path: imageBlob.path,
+					description,
+				}
+			})
+		)
+
+		new Notice('Uploading images to Strapi...')
+		const uploadedImages = await uploadImagesToStrapi(
+			imageDescriptions,
+			settings
+		)
+
+		new Notice('Replacing image paths...')
+		content = replaceImagePaths(content, uploadedImages)
+		await app.vault.modify(file, content)
+		new Notice('Images uploaded and links updated successfully!')
+	} else {
+		new Notice(
+			'No local images found in the content... Skip the image processing...'
+		)
+	}
+
+	/** ****************************************************************************
+	 * Generate article content
+	 * *****************************************************************************
+	 */
+	new Notice('Generating article content...')
+	const articleContent = await generateArticleContent(
+		content,
+		openai,
+		settings,
+		useAdditionalCallAPI
+	)
+
+	/** ****************************************************************************
+	 * Add the content, image, and gallery to the article content based on the settings
+	 * *****************************************************************************
+	 */
+	const imageFullPathProperty = useAdditionalCallAPI
+		? settings.additionalImageFullPathProperty
+		: settings.mainImageFullPathProperty
+	const galleryFullPathProperty = useAdditionalCallAPI
+		? settings.additionalGalleryFullPathProperty
+		: settings.mainGalleryFullPathProperty
+
+	articleContent.data = {
+		...articleContent.data,
+		...(imageBlob &&
+			imageFullPathProperty && { [imageFullPathProperty]: imageBlob.id }),
+		...(galleryUploadedImageIds.length > 0 &&
+			galleryFullPathProperty && {
+				[galleryFullPathProperty]: galleryUploadedImageIds,
+			}),
+	}
+
+	new Notice('Article content generated successfully!')
+	try {
+		const response = await fetch(
+			useAdditionalCallAPI
+				? settings.additionalUrl
+				: settings.strapiArticleCreateUrl,
+			{
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${settings.strapiApiToken}`,
+				},
+				body: JSON.stringify(articleContent),
+			}
+		)
+
+		if (response.ok) {
+			new Notice(
+				'Check your API content now, the article is created & uploaded! 🎉'
+			)
+		} else {
+			new Notice('Failed to create article in Strapi.')
+		}
+	} catch (error) {
+		new Notice('Error creating article in Strapi.')
+	}
+}
+
+/**
+ * Extract image paths from the markdown content
+ * @param content
+ */
+export function extractImagePaths(content: string): string[] {
+	const imageRegex = /!\[\[([^\[\]]*\.(png|jpe?g|gif|bmp|webp))\]\]/gi
+	const imagePaths: string[] = []
+	let match
+
+	while ((match = imageRegex.exec(content)) !== null) {
+		imagePaths.push(match[1])
+	}
+
+	return imagePaths
+}
+
+/**
+ * Check if the markdown content has unexported images
+ * @param content
+ */
+export function hasUnexportedImages(content: string): boolean {
+	const imageRegex = /!\[\[([^\[\]]*\.(png|jpe?g|gif|bmp|webp))\]\]/gi
+	return imageRegex.test(content)
+}
+
+/**
+ * Get the image blobs from the image paths
+ * @param app
+ * @param imagePaths
+ */
+export async function getImageBlobs(
+	app: App,
+	imagePaths: string[]
+): Promise<{ path: string; blob: Blob; name: string }[]> {
+	const files = app.vault.getAllLoadedFiles()
+	const fileNames = files.map(file => file.name)
+	const imageFiles = imagePaths.filter(path => fileNames.includes(path))
+	return await Promise.all(
+		imageFiles.map(async path => {
+			const file = files.find(file => file.name === path)
+			if (file instanceof TFile) {
+				const blob = await app.vault.readBinary(file)
+				return {
+					name: path,
+					blob: new Blob([blob], { type: 'image/png' }),
+					path: file.path,
+				}
+			}
+			return {
+				name: '',
+				blob: new Blob(),
+				path: '',
+			}
+		})
+	)
+}
+
+/**
+ * Get the image blob from the image path
+ * @param app
+ * @param imageFolderPath
+ */
+export async function getImageBlob(
+	app: App,
+	imageFolderPath: string
+): Promise<{ path: string; blob: Blob; name: string } | null> {
+	const folder = app.vault.getAbstractFileByPath(imageFolderPath)
+	if (folder instanceof TFolder) {
+		const files = folder.children.filter(
+			file =>
+				file instanceof TFile &&
+				file.extension.match(/^(jpg|jpeg|png|gif|bmp|webp)$/i)
+		)
+		if (files.length > 0) {
+			const file = files[0] as TFile
+			const blob = await app.vault.readBinary(file)
+			return {
+				name: file.name,
+				blob: new Blob([blob], { type: 'image/png' }),
+				path: file.path,
+			}
+		}
+	} else {
+		new Notice(
+			'Image folder not found. Please create an "image" folder next to your article file.'
+		)
+	}
+	return null
+}
+
+/**
+ * Get the gallery image blobs from the folder path
+ * @param app
+ * @param galleryFolderPath
+ */
+export async function getGalleryImageBlobs(
+	app: App,
+	galleryFolderPath: string
+): Promise<{ path: string; blob: Blob; name: string }[]> {
+	const folder = app.vault.getAbstractFileByPath(galleryFolderPath)
+	if (folder instanceof TFolder) {
+		const files = folder.children.filter(
+			file =>
+				file instanceof TFile &&
+				file.extension.match(/^(jpg|jpeg|png|gif|bmp|webp)$/i)
+		)
+		return Promise.all(
+			files.map(async file => {
+				const blob = await app.vault.readBinary(file as TFile)
+				return {
+					name: file.name,
+					blob: new Blob([blob], { type: 'image/png' }),
+					path: file.path,
+				}
+			})
+		)
+	} else {
+		new Notice(
+			'Gallery folder not found. Please create a "gallery" folder next to your article file.'
+		)
+	}
+	return []
+}
+
+/**
+ * Replace the image paths in the content with the uploaded images
+ * @param content
+ * @param uploadedImages
+ */
+export function replaceImagePaths(
+	content: string,
+	uploadedImages: { [key: string]: { url: string; data: any } }
+): string {
+	for (const [localPath, imageData] of Object.entries(uploadedImages)) {
+		const markdownImageRegex = new RegExp(`!\\[\\[${localPath}\\]\\]`, 'g')
+		content = content.replace(
+			markdownImageRegex,
+			`![${imageData.data.alternativeText}](${imageData.url})`
+		)
+	}
+	return content
+}

package/src/utils/openai-generator.ts

@@ -0,0 +1,139 @@
+import { OpenAI } from 'openai'
+import { StrapiExporterSettings } from '../types/settings'
+import { ArticleContent } from '../types/article'
+import { Notice } from 'obsidian'
+
+/**
+ * Generate article content using OpenAI
+ * @param content
+ * @param openai
+ * @param settings
+ * @param useAdditionalCallAPI
+ */
+export async function generateArticleContent(
+	content: string,
+	openai: OpenAI,
+	settings: StrapiExporterSettings,
+	useAdditionalCallAPI = false
+): Promise<ArticleContent> {
+	let jsonTemplate: any
+	let jsonTemplateDescription: any
+	let contentAttributeName: string
+
+	if (useAdditionalCallAPI) {
+		jsonTemplate = JSON.parse(settings.additionalJsonTemplate)
+		jsonTemplateDescription = JSON.parse(
+			settings.additionalJsonTemplateDescription
+		)
+		contentAttributeName = settings.additionalContentAttributeName
+	} else {
+		jsonTemplate = JSON.parse(settings.jsonTemplate)
+		jsonTemplateDescription = JSON.parse(settings.jsonTemplateDescription)
+		contentAttributeName = settings.strapiContentAttributeName
+	}
+
+	const articlePrompt = `You are an SEO expert. Generate an article based on the following template and field descriptions:
+
+    Template:
+    ${JSON.stringify(jsonTemplate, null, 2)}
+    
+    Field Descriptions:
+    ${JSON.stringify(jsonTemplateDescription, null, 2)}
+    
+    The main content of the article should be based on the following text and all the keywords around the domain of the text:
+    ----- CONTENT -----
+    ${content.substring(0, 500)}
+    ----- END CONTENT -----
+    
+    Please provide the generated article content as a JSON object following the given template structure.
+    
+    ${settings.additionalPrompt ? `Additional Prompt: ${settings.additionalPrompt}` : ''}`
+
+	const completion = await openai.chat.completions.create({
+		model: 'gpt-3.5-turbo-0125',
+		messages: [
+			{
+				role: 'user',
+				content: articlePrompt,
+			},
+		],
+		max_tokens: 2000,
+		n: 1,
+		stop: null,
+	})
+
+	let articleContent = JSON.parse(completion.choices[0].message.content ?? '{}')
+	articleContent = {
+		data: {
+			...articleContent.data,
+			[contentAttributeName]: content,
+		},
+	}
+
+	return articleContent
+}
+
+/**
+ * Get the description of the image using OpenAI
+ * @param imageBlob
+ * @param openai
+ */
+export const getImageDescription = async (imageBlob: Blob, openai: OpenAI) => {
+	// Get the image description using the OpenAI API (using gpt 4 vision preview model)
+	// @ts-ignore
+	const response = await openai.chat.completions.create({
+		model: 'gpt-4-vision-preview',
+		messages: [
+			{
+				role: 'user',
+				content: [
+					{
+						type: 'text',
+						text: `What's in this image? make it simple, i just want the context and an idea(think about alt text)`,
+					},
+					{
+						type: 'image_url',
+						// Encode imageBlob as base64
+						// @ts-ignore
+						image_url: `data:image/png;base64,${btoa(
+							new Uint8Array(await imageBlob.arrayBuffer()).reduce(
+								(data, byte) => data + String.fromCharCode(byte),
+								''
+							)
+						)}`,
+					},
+				],
+			},
+		],
+	})
+
+	new Notice(response.choices[0].message.content ?? 'no response content...')
+	new Notice(
+		`prompt_tokens: ${response.usage?.prompt_tokens} // completion_tokens: ${response.usage?.completion_tokens} // total_tokens: ${response.usage?.total_tokens}`
+	)
+
+	// gpt-3.5-turbo-0125
+	// Generate alt text, caption, and title for the image, based on the description of the image
+	const completion = await openai.chat.completions.create({
+		model: 'gpt-3.5-turbo-0125',
+		messages: [
+			{
+				role: 'user',
+				content: `You are an SEO expert and you are writing alt text, caption, and title for this image. The description of the image is: ${response.choices[0].message.content}.
+				Give me a title (name) for this image, an SEO-friendly alternative text, and a caption for this image.
+				Generate this information and respond with a JSON object using the following fields: name, alternativeText, caption.
+				Use this JSON template: {"name": "string", "alternativeText": "string", "caption": "string"}.`,
+			},
+		],
+		max_tokens: 750,
+		n: 1,
+		stop: null,
+	})
+
+	new Notice(completion.choices[0].message.content ?? 'no response content...')
+	new Notice(
+		`prompt_tokens: ${completion.usage?.prompt_tokens} // completion_tokens: ${completion.usage?.completion_tokens} // total_tokens: ${completion.usage?.total_tokens}`
+	)
+
+	return JSON.parse(completion.choices[0].message.content?.trim() || '{}')
+}

package/src/utils/strapi-uploader.ts

@@ -0,0 +1,127 @@
+import { Notice } from 'obsidian'
+import { StrapiExporterSettings } from '../types/settings'
+import { ImageBlob, ImageDescription } from '../types/image'
+
+/**
+ * Upload images to Strapi
+ * @param imageDescriptions
+ * @param settings
+ * @param app
+ * @param imageFolderPath
+ */
+export async function uploadImagesToStrapi(
+	imageDescriptions: ImageDescription[],
+	settings: StrapiExporterSettings,
+	app: any = null,
+	imageFolderPath: string = ''
+): Promise<{ [key: string]: { url: string; data: any } }> {
+	const uploadedImages: { [key: string]: { url: string; data: any; id: any } } =
+		{}
+
+	for (const imageDescription of imageDescriptions) {
+		const formData = new FormData()
+		formData.append('files', imageDescription.blob, imageDescription.name)
+		formData.append(
+			'fileInfo',
+			JSON.stringify({
+				name: imageDescription.description.name,
+				alternativeText: imageDescription.description.alternativeText,
+				caption: imageDescription.description.caption,
+			})
+		)
+
+		try {
+			const response = await fetch(`${settings.strapiUrl}/api/upload`, {
+				method: 'POST',
+				headers: {
+					Authorization: `Bearer ${settings.strapiApiToken}`,
+				},
+				body: formData,
+			})
+
+			if (response.ok) {
+				const data = await response.json()
+				uploadedImages[imageDescription.name] = {
+					url: data[0].url,
+					data: data[0],
+					id: data[0].id,
+				}
+			} else {
+				new Notice(`Failed to upload image: ${imageDescription.name}`)
+			}
+		} catch (error) {
+			new Notice(`Error uploading image: ${imageDescription.name}`)
+		}
+	}
+
+	if (imageFolderPath && app) {
+		// Save metadata to a file only if there are uploaded images
+		if (Object.keys(uploadedImages).length > 0) {
+			const metadataFile = `${imageFolderPath}/metadata.json`
+			await app.vault.adapter.write(
+				metadataFile,
+				JSON.stringify(uploadedImages)
+			)
+		}
+	}
+	return uploadedImages
+}
+
+/**
+ * Upload gallery images to Strapi
+ * @param imageBlobs
+ * @param settings
+ * @param app
+ * @param galleryFolderPath
+ */
+export async function uploadGalleryImagesToStrapi(
+	imageBlobs: ImageBlob[],
+	settings: StrapiExporterSettings,
+	app: any = null,
+	galleryFolderPath: string = ''
+): Promise<number[]> {
+	const uploadedImageIds: number[] = []
+	const uploadedImages: { [key: string]: { url: string; data: any; id: any } } =
+		{}
+
+	for (const imageBlob of imageBlobs) {
+		const formData = new FormData()
+		formData.append('files', imageBlob.blob, imageBlob.name)
+
+		try {
+			const response = await fetch(`${settings.strapiUrl}/api/upload`, {
+				method: 'POST',
+				headers: {
+					Authorization: `Bearer ${settings.strapiApiToken}`,
+				},
+				body: formData,
+			})
+
+			if (response.ok) {
+				const data = await response.json()
+				uploadedImages[imageBlob.name] = {
+					url: data[0].url,
+					id: data[0].id,
+					data: data[0],
+				}
+			} else {
+				new Notice(`Failed to upload gallery image: ${imageBlob.name}`)
+			}
+		} catch (error) {
+			new Notice(`Error uploading gallery image: ${imageBlob.name}`)
+		}
+	}
+
+	if (galleryFolderPath && app) {
+		// Save metadata to a file only if there are uploaded images
+		if (Object.keys(uploadedImages).length > 0) {
+			const metadataFile = `${galleryFolderPath}/metadata.json`
+			await app.vault.adapter.write(
+				metadataFile,
+				JSON.stringify(uploadedImages)
+			)
+		}
+	}
+
+	return uploadedImageIds
+}

package/src/utils/validators.ts

@@ -0,0 +1,8 @@
+export const validateJsonTemplate = (jsonString: string): boolean => {
+	try {
+		JSON.parse(jsonString)
+		return true
+	} catch (error) {
+		return false
+	}
+}

package/versions.json

@@ -7,5 +7,7 @@
 	"1.0.8": "1.5.0",
 	"1.0.9": "1.5.0",
 	"1.0.10": "1.5.0",
-	"1.0.11": "1.5.0"
+	"1.0.11": "1.5.0",
+	"1.0.12": "1.5.0",
+	"1.0.13": "1.5.0"
 }