인용문으로 이미지를 생성하는 Twitter 봇!

트위터에서 사람들이 영감을 주거나 웃기거나 어리석은 인용문을 트윗하는 것을 자주 봅니다. 인용문이 포함된 이미지를 생성하는 트위터 봇이 있다면 어떨까요? 이와 같이 :



그래서 나는 하나를 짓기로 결정했습니다.

"이 스크립트를 바닥글 섹션에 복사"또는 "이 스크립트를 헤드 태그에 포함"이외의 Javascript로 앱을 만든 경험이 없으며, 경험을 얻고 자바스크립트를 배우기 위해 Javascript로 이 봇을 빌드하기로 선택했습니다.

고맙게도 이 비디오 자습서는 시작하는 데 많은 도움이 됩니다.



(또한 확인)

Twitter 애플리케이션 설정

설정은 이것과 매우 유사하므로 이 게시물을 따라 Twitter 응용 프로그램을 설정할 수 있습니다. ðŸ~…

더 이상 사용할 수 없는 기사

사용자 이벤트 듣기

누군가 이 봇 트윗을 인용할 때 이 봇이 작동하기를 바랍니다. 사용자 이벤트를 수신하는 스트림을 만들 예정입니다.

const stream = T.stream("user");
stream.on("quoted_tweet", tweetEvent);

누군가 이 봇 트윗을 인용하면 tweetEvent 콜백이 실행됩니다. 다음은 tweetEvent 콜백 코드입니다.

function tweetEvent(eventMsg) {

  const text = eventMsg.target_object.text;
  const from = `@${eventMsg.source.screen_name}`;
  const twit_id = eventMsg.target_object.id_str;

  if (eventMsg.event === "quoted_tweet") {
    const tweetMedia = imagePath => {
      try {
        var b64content = fs.readFileSync(imagePath, { encoding: "base64" });
        T.post("media/upload", { media_data: b64content }).then(response => {
          var mediaIdStr = response.data.media_id_string;
          var altText = "Image Quote Generated By Quotemakerbot";
          var meta_params = {
            media_id: mediaIdStr,
            alt_text: { text: altText }
          };

          T.post("media/metadata/create", meta_params).then(() => {
            var params = {
              status: `${from}`,
              in_reply_to_status_id: twit_id,
              media_ids: [mediaIdStr]
            };
            T.post("statuses/update", params).then(response => {
              console.log("Successfully post to twitter");

    //some code omitted

tweetMedia는 Twitter에 이미지를 게시하기 위해 이미지 경로를 수락하는 함수일 뿐입니다. 이미지 처리를 수행하는 "실제"코드는 다음과 같습니다.

exports.processImage = async (from, text) => {
  const param = tweetUtil.getUnsplashParam(text)
  options = {
    url: `https://source.unsplash.com/1024x576/${param}`,
    dest: `${from}.jpg`
  }
  const { filename, image } = await download.image(options)
  const filteredImage = await ImageProcessor.filterImage(filename,`${from}-filtered.jpg`)
  setTimeout(function() {
  ImageProcessor.drawImageAndTextToCanvas(filteredImage,{
      text:tweetUtil.cleanAndTidyTweet(text),
      imageName: from+`-quoted.jpg`,
      username: from
    })
  }, 1500);
  return `${from}-quoted.jpg`
}

솔직히 말해서 코드의 모든 부분을 설명할 수는 없습니다. 이 봇은 9개월 전에 만들어졌는데 코드를 다시 읽어보니 다음과 같았습니다.



하지만 이 봇이 일반적으로 작동하는 방식은 다음과 같습니다.

누군가 이 봇의 트윗을 인용합니다.

이 봇은 Unsplash에서 임의로 또는 지정된 범주별로 이미지를 다운로드합니다. 예를 들어 -coding 옵션을 추가하면 Unsplash에서 코딩 범주로 이미지를 다운로드합니다. 이미지는 다음과 같습니다.

그런 다음 텍스트를 더 쉽게 읽을 수 있도록 이미지의 밝기와 대비를 약간 떨어뜨렸습니다.

이미지와 텍스트를 캔버스에 그립니다.

Twitter에 게시하세요!

그게 다야, 한번 해봐!

Click here 사용 가능한 옵션 목록에서 옵션을 추가하지 않으면 배경 이미지는 Unsplash의 임의 카테고리에서 가져옵니다.

사용 예

트윗 형식 : -option (인용문)

결과

추신: 때때로 이 봇이 예상대로 작동하지 않습니다. 🙇