[Share] Send annotation image to ChatGPT-4-vision

[volatile-static]

Description

How to setup

How to use

Results

Event

None

Operation

Script

Data

/**
 * Ask Annotation
 * @author volatile-static
 * @link https://github.com/windingwind/zotero-actions-tags/discussions/225
 */
const BASE_URL = 'https://YOURNAME.openai.azure.com/openai/deployments/gpt-4/chat/completions?api-version=2023-07-01-preview';
const API_KEY = 'your0api1key';

if (!item) return;

const { Zotero, Zotero_Tabs, console, alert } = require('window'),
	popMsg = new Zotero.ProgressWindow(),
	progMeter = new popMsg.ItemProgress('chrome://zotero/skin/tick.png', 'AI is thinking.'),
	reader = Zotero.Reader.getByTabID(Zotero_Tabs.selectedID),
	ann = reader?._state.annotations.find(a => a.id == item.key);
if (!ann?.image) return 'No image found.';

const payload = {
	model: 'gpt-4-vision-preview',
	max_tokens: 3000,
	messages: [{
		role: 'user',
		content: [
			{ type: 'text', text: `这是文档\`${reader._title}\`中的一幅图，请根据标题简要描述图中内容` },
			{ type: 'image_url', image_url: { url: ann.image } }
		]
	}]
};
console.debug('Action chat payload', payload);

Zotero.HTTP.doPost(
	BASE_URL,
	JSON.stringify(payload),
	resp => {
		console.debug('Action response', resp);
		const res = JSON.parse(resp.response);
		if (resp.status != 200) {
			progMeter.setIcon('chrome://zotero/skin/cross.png');
			progMeter.setText(res.statusCode);
			new popMsg.ItemProgress('', res.message);
		} else {
			const dat = res.choices[0];
			progMeter.setProgress(100);
			progMeter.setText(`Finished [${dat.finish_details.type}]`);
			new popMsg.ItemProgress('', dat.message.content);
			alert(dat.message.content);
		}
	},
	{ 
		'Content-Type': 'application/json', 
		'api-key': API_KEY,  // for Azure
		Authorization: 'Bearer ' + API_KEY  // for OpenAI 
	}
);

popMsg.changeHeadline('Action:', '', 'Ask Annotation');
popMsg.show();

Anything else

You must have access to model gpt-4-vision-preview.

[tricktreat]

如何把生成的解释，设置为annotation的comment呢？尝试了item.annotationComment = ${dat.message.content}和ann.comment = ${dat.message.content}都不能刷新comment。 @volatile-static @windingwind

[volatile-static]

item.annotationComment = `${dat.message.content}`

你写的这个就可以，需要注意的是，对条目修改后需要调用item.saveTx()进行保存
欢迎分享你修改后的版本

[tricktreat]

保存GPT-4v对图片的解释到annotation的comment中：

更新后的代码：

/**
 * Ask Annotation
 * @author volatile-static
 * @link https://github.com/windingwind/zotero-actions-tags/discussions/225
 */
const BASE_URL = 'https://YOURNAME.openai.azure.com/openai/deployments/gpt-4/chat/completions?api-version=2023-07-01-preview';
const API_KEY = 'your0api1key';

if (!item) return;

const { Zotero, Zotero_Tabs, console, alert } = require('window'),
	popMsg = new Zotero.ProgressWindow(),
	progMeter = new popMsg.ItemProgress('chrome://zotero/skin/tick.png', 'AI is thinking.'),
	reader = Zotero.Reader.getByTabID(Zotero_Tabs.selectedID),
	ann = reader?._state.annotations.find(a => a.id == item.key);
if (!ann?.image) return 'No image found.';

const payload = {
	model: 'gpt-4-vision-preview',
	max_tokens: 3000,
	messages: [{
		role: 'user',
		content: [
			{ type: 'text', text: `这是文档\`${reader._title}\`中的一幅图，请根据标题简要描述图中内容` },
			{ type: 'image_url', image_url: { url: ann.image } }
		]
	}]
};
console.debug('Action chat payload', payload);

Zotero.HTTP.doPost(
	BASE_URL,
	JSON.stringify(payload),
	resp => {
		console.debug('Action response', resp);
		const res = JSON.parse(resp.response);
		if (resp.status != 200) {
			progMeter.setIcon('chrome://zotero/skin/cross.png');
			progMeter.setText(res.statusCode);
			new popMsg.ItemProgress('', res.message);
		} else {
			const dat = res.choices[0];
			progMeter.setProgress(100);
			progMeter.setText(`Finished [${dat.finish_details.type}]`);
			new popMsg.ItemProgress('', dat.message.content);
			item.annotationComment = `${dat.message.content}`;
			item.saveTx();
		}
	},
	{ 
		'Content-Type': 'application/json', 
		'api-key': API_KEY,  // for Azure
		Authorization: 'Bearer ' + API_KEY  // for OpenAI 
	}
);

popMsg.changeHeadline('Action:', '', 'Ask Annotation');
popMsg.show();

[volatile-static]

update：

- progMeter.setText(`Finished [${dat.finish_details.type}]`);
+ progMeter.setText(`Finished [${dat.finish_details?.type}]`);

[Cynthia518]

非常实用的脚本，很想尝试一下，奈何没法使用openai。编程小白一枚，能否出一份使用中国大模型（如阿里云通义千问qwen-plus-latest）的脚本呢？

[Cynthia518]

您好，api密钥是没问题的（我用在另外一个脚本是可以用的，链接如下https://github.com/windingwind/zotero-actions-tags/discussions/457，[Share] LLM-powered automatic paper summarization #457），模型选择这块不大懂的😂。
本来怀疑是不是上一个脚本中判断图片这地方和您提供的代码变化太大，又搞了个简化的，也是可以运行，但是一直显示ai is thinking,但是不输出内容😂。

 * Ask Annotation with Qwen (qwen-plus-latest)
 * @author YOURNAME
 */
const config = {
    // 阿里千问 API 配置
    endpoint: 'https://api.qwen.ai/v1/chat/completions', // 阿里千问 API 地址
    apiKey: 'sk-', // 阿里千问 API 密钥
    // 请求参数
    model: 'qwen-plus-latest', // 使用的阿里千问模型
    maxTokens: 3000, // 最大返回 tokens 数量
    temperature: 0.7 // 控制回答随机性（0-1 之间）
};

if (!item) return;

const { Zotero, Zotero_Tabs, console, alert } = require('window'),
	popMsg = new Zotero.ProgressWindow(),
	progMeter = new popMsg.ItemProgress('chrome://zotero/skin/tick.png', 'AI is thinking.'),
	reader = Zotero.Reader.getByTabID(Zotero_Tabs.selectedID),
	ann = reader?._state.annotations.find(a => a.id == item.key);
if (!ann?.image) return 'No image found.';


const payload = {
    model: config.model,
    max_tokens: config.maxTokens,
    temperature: config.temperature,
    messages: [{
        role: 'user',
        content: [
            { type: 'text', text: `这是文档\`${reader._title}\`中的一幅图，请根据标题简要描述图中内容` },
            { type: 'image_url', image_url: { url: ann.image } }
        ]
    }]
};
console.debug('Action chat payload', payload);

Zotero.HTTP.doPost(
    config.endpoint,
	JSON.stringify(payload),
	resp => {
		console.debug('Action response', resp);
		const res = JSON.parse(resp.response);
		if (resp.status != 200) {
			progMeter.setIcon('chrome://zotero/skin/cross.png');
			progMeter.setText(res.statusCode);
			new popMsg.ItemProgress('', res.message);
		} else {
			const dat = res.choices[0];
			progMeter.setProgress(100);
			progMeter.setText(`Finished [${dat.finish_details?.type}]`);
			new popMsg.ItemProgress('', dat.message.content);
			item.annotationComment = `${dat.message.content}`;
			item.saveTx();
		}
	},
	{ 
		'Content-Type': 'application/json', 
		'Authorization': 'Bearer ' + config.apiKey // 阿里千问认证方式
	}
);    

popMsg.changeHeadline('Action:', '', 'Ask Annotation with Qwen');
popMsg.show();

[volatile-static]

其实什么都不用改，接口都是兼容的

const BASE_URL = 'https://dashscope.aliyuncs.com/compatible-mode/v1';
const API_KEY = 'sk-xxx';
if (!item) return;

const { Zotero, Zotero_Tabs, console, alert } = require('window'),
	popMsg = new Zotero.ProgressWindow(),
	progMeter = new popMsg.ItemProgress('chrome://zotero/skin/tick.png', 'AI is thinking.'),
	reader = Zotero.Reader.getByTabID(Zotero_Tabs.selectedID),
	ann = reader?._state.annotations.find(a => a.id == item.key);
if (!ann?.image) return 'No image found.';
else if (ann.image.length * 3 / 4 > 1e7) return 'Image too large.';
// reader._onCopyImage(ann.image);

const payload = {
	model: 'qwen-vl-max-latest',
	messages: [{
		role: 'user',
		content: [
			{ type: 'text', text: `这是文档\`${reader._title}\`中的一幅图，请根据标题简要描述图中内容，用中文作答。` },
			{ type: 'image_url', image_url: { url: ann.image } }
		]
	}]
};
console.debug('Action chat payload', payload);

Zotero.HTTP.doPost(
	BASE_URL + '/chat/completions',
	JSON.stringify(payload),
	resp => {
		console.debug('Action response', resp);
		const res = JSON.parse(resp.response);
		if (resp.status != 200) {
			progMeter.setIcon('chrome://zotero/skin/cross.png');
			progMeter.setText(res.statusCode);
			new popMsg.ItemProgress('', res.message);
		} else {
			const dat = res.choices[0];
			new popMsg.ItemProgress('', dat.message.content);
			progMeter.setProgress(100);
			progMeter.setText(`Finished [${dat.finish_details?.type}]`);
			alert(dat.message.content);
		}
	},
	{ 
		'Content-Type': 'application/json',
		Authorization: 'Bearer ' + API_KEY
	}
);

popMsg.changeHeadline('Action:', '', 'Ask Annotation');
popMsg.show();

[Cynthia518]

大佬一出手，果然不同凡响，顺利解决问题啦，谢谢大佬👍。
问题一：我尝试比较您原版得脚本代码和您帮我修改得脚本代码，并尝试逐一替换不一样的地方，发现此处的改动会影响脚本运行，导致无法输出内容，请问这里改动顺序为什么会有这么大的影响呢？

			const dat = res.choices[0];
			new popMsg.ItemProgress('', dat.message.content);
			progMeter.setProgress(100);
			progMeter.setText(`Finished [${dat.finish_details?.type}]`);
			alert(dat.message.content);
问题二：此处增加的代码是何用意呢？我尝试删除此处代码，脚本也可以顺利运行。
```	 else if (ann.image.length * 3 / 4 > 1e7) return 'Image too large.';
// reader._onCopyImage(ann.image);

[volatile-static]

既然你对这个代码很感兴趣，那我建议你首先学一下Markdown语法，看看别人（比如我）是怎么发代码片段的，为什么我发的有语法高亮。其次我觉得你这个问题不是你问过AI之后才来问我的，建议你与zotero相关的代码可以先在这里问，也可以问免费的GitHub copilot，实在解决不掉的再问别人。最后，reader._onCopyImage是把图片复制到剪贴板，我调试时用的，这里注释掉就不执行了。希望我的回答对你有所启发

[Cynthia518]

非常感谢您的耐心解答👍。
刚开始用zotero，之前没接触过markdown语法，给您造成不便，万分抱歉。谢谢您的建议，后续补充相关的知识，不再犯这样低级的错误。