如何从前端应用调用基于ink!开发的Openbrush智能合约？

• 我基于Substrate的WASM智能合约开发语言ink!完成合约开发。
• 开发过程中选用了Openbrush库，它的定位和EVM生态里的OpenZeppelin一致。
• 参照官方文档就能快速实现合约功能，但我一直搞不懂怎么从前端调用这些合约。
• 后来在Telegram上找到了可行的解决方案，写下这些内容希望能帮到有同样困惑的人。

Openbrush中定义的函数声明示例如下：

psp34::transfer (接收方: TransferInput1, 代币ID: TransferInput2, 附加数据: TransferInput3)
psp34::ownerOf (代币ID: OwnerOfInput1): Option<账户ID>

内容的提问来源于stack exchange，提问作者s.Takahashi