index.html

<%= header_begin %>

<%= segment_script %>

<title>Social Media Image Recommender - Algorithmia</title>
<link rel="canonical" href="https://demos.algorithmia.com/<%= slug %>">
<meta name="description" content="Get image recommendations based on text content"/>
<meta name="robots" content="index,follow">

<!-- FB -->
<meta property="og:title" content="Get image recommendations based on text content">
<meta property="og:url" content="https://demos.algorithmia.com/social-image-rec/">
<meta property="og:description" content="Use machine learning to get image recommendations based on text content, improving post virality and SEO">
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<meta property="og:image" content="https://demos.algorithmia.com/social-image-rec/public/images/fbshare.jpg">
<meta property="og:site_name" content="Algorithmia">

<!-- TWTR -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@algorithmia">
<meta name="twitter:title" content="Get image recommendations based on text content">
<meta name="twitter:description" content="Use machine learning to get image recommendations based on text content, improving post virality and SEO">
<meta name="twitter:image" content="https://demos.algorithmia.com/social-image-rec/public/images/twshare.jpg">
<meta name="twitter:creator" content="@algorithmia">

<!-- OTHER -->
<meta itemprop="name" content="Get image recommendations based on text content">
<meta itemprop="description" content="Use machine learning to get image recommendations based on text content, improving post virality and SEO">

<%= header_end %>

<section class="purple-grad-background hero">
  <div class="container" id="content">
    <div class="row">
      <div class="col-md-12">
        <h1>Social Media Image Recommender</h1>
        <h4 class="light whitespace-md">Use machine learning to get image recommendations based on text content, improving post virality and SEO</h4>
      </div>
      <div class="col-sm-12 col-md-7">
        <div class="card">
          <p>Select a news article you'd like to analyze. Our machine learning algorithms inspect your images, and tell you which ones are best to use when sharing the article on social networks, improving your post's virality and search ranking.</p>
          <h3 class="whitespace">1. Select a News Article</h3>
          <div class="form-group whitespace">
            <select class="form-control" id="inputTextUrlSelector" disabled="true" onchange="prefillText()">
              <option value="">Loading...</option>
            </select>
            <div id="inputTextUrlEntryWrapper" style="display: none" class="form-group">
              <div class="input-group imageSearch">
                <input type="text" class="form-control" id="inputTextUrlEntry" value="http://">
                <span class="input-group-btn">
                  <button class="btn btn-default" onclick="cancelTextUrlEntry()">Cancel</button>
                  <button class="btn btn-primary" onclick="prefillText()">Go</button>
                </span>
              </div>
            </div>
          </div>
          <div class="form-group whitespace-md" id="inputs" style="display: none">
            <div id="inputText" class="form-control input__textarea"></div>
            <div id="inputUrlDisplay"></div>
            <div class="row whitespace" id="images"></div>
          </div>
          <h3 class="whitespace">2. Select output size</h3>
          <h5>Chose a dimension to smart crop the recommended images</h5>
          <div class="whitespace-md radio-btns">
            <button name="selectedAlgorithm" class="btn btn-radio" id="button-facebook" onclick="selectSize('facebook')">Facebook</button>
            <button name="selectedAlgorithm" class="btn btn-radio" id="button-twitter" onclick="selectSize('twitter')">Twitter</button>
            <button name="selectedAlgorithm" class="btn btn-radio" id="button-linkedin" onclick="selectSize('linkedin')">LinkedIn</button>
          </div>
          <form class="form-group" onsubmit="analyze(); return false">
            <button class="btn btn-primary">
                <span>
                  <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
                  <span id="analyze-button-text">Get Recommendations</span>
                </span>
            </button>
          </form>
          <div id="status-label"></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div id="overlay" class="container hidden">
  <div class="dots-text-container">
    <h3 class="dots-text">Boom...</h3>
  </div>
  <div class="dots-container">
      <div class="dot dot1"></div>
      <div class="dot dot2"></div>
      <div class="dot dot3"></div>
      <div class="dot dot4"></div>
  </div>
</div>

<section class="container hidden results" id="results-algo">
  <div class="row">
    <div class="col-md-12">
      <h4 class="result-title">Results</h4>
      <div class="result-output row"></div>
  </div>
</section>

<!-- EXPLANATION -->
<div class="grey-background">
<section class="container">
  <div class="row row-md">
    <div class="col-md-8">
      <h2 class="whitespace-none">How it works</h2>
      <h4>Applying machine learning algorithms to get image recommendations based on text content</h4>
      <p>Want help Selecting the best image to go with your news article or blogpost? Social Media Image Recommender examines your text to find the most relevant keywords, then does the same with any images you have supplied. It then ranks your images, from most relevant to least, based on how strongly each image relates to the text's content.</p>
    </div>
  </div>
  <div class="row row-md">
    <div class="col-md-8">
      <h3>Tools used</h3>
      <ul>
        <li><a href="https://algorithmia.com/algorithms/web/SocialMediaImageRecommender">SocialMediaImageRecommender</a> – get image recommendations based on text content</li>
      </ul>
    </div>
  </div>
  <div class="row row-md">
    <div class="col-md-8">
      <h3>Method</h3>
      <p><ol>
        <li><a href="https://algorithmia.com/algorithms/StanfordNLP/SentenceSplit">StanfordNLP/SentenceSplit</a> and <a href="https://algorithmia.com/algorithms/nlp/LDA">nlp/LDA</a> extract tags from the provided text</li>
        <li><a href="https://algorithmia.com/algorithms/translation/GoogleTranslate">translation/GoogleTranslate</a> detects the language of the content, translating to English if necessary</li>
        <li><a href="https://algorithmia.com/algorithms/opencv/SmartThumbnail">opencv/SmartThumbnail</a> resizes the images to the desired dimensions</li>
        <li><a href="https://algorithmia.com/algorithms/deeplearning/InceptionNet">deeplearning/InceptionNet</a> extracts tags the images</li>
        <li><a href="https://algorithmia.com/algorithms/nlp/Word2Vec">nlp/Word2Vec</a> calculates a similarity score between the text and image tags, scoring the images accordingly</li>
      </ol></p>
    </div>
  </div>
  <div class="row row-md">
    <div class="col-md-8">
      <h3>Takeaway</h3>
      <p>When publishing online, your choice of images affects how often your post will be shared on social networks and where it will be ranked in search results. Social Image Recommender gives you an objective score for how well each image matches your content, so you can make better decisions and improve you post's virality.</p>
    </div>
  </div>
</section>
</div>

<!-- BUILT FOR DEVS -->
  <section class="container">
    <div class="row">
      <div class="col-md-9">
        <h2 class="whitespace-sm">Built For Developers</h2>
        <h4 class="whitespace-md">A simple, scalable API for machine intelligence</h4>
          <p class="item-title">SAMPLE INPUT</p>
          <pre class="whitespace-md"><code class="python">import Algorithmia

client = Algorithmia.client('_API_KEY_')
algo = client.algo('web/SocialMediaImageRecommender/0.1.3')
input = {
  "text": "Not long ago, I watched a woman set a carton of Land O’ Lakes Fat-Free Half-and-Half on the conveyor belt at a supermarket...",
  "images": [
    "https://img.washingtonpost.com/newWK-diner0718071405452672.jpg",
    "https://img.washingtonpost.com/FDsmartfoodfeb01-6_1326560940.jpg",
    "https://img.washingtonpost.com/thanksgiving0161414090629.jpg"
  ],
  "dimension": {
    "height": 630,
    "width": 1200
  }
}
print algo.pipe(input)
</code></pre>
            <p class="item-title">SAMPLE OUTPUT</p>
            <pre><code class="json">{
  "recommendations": [
    {
      "original_image": "https://img.washingtonpost.com/thanksgiving0161414090629.jpg",
      "score": 27.51867963721599,
      "social_image": "data://.algo/opencv/SmartThumbnail/temp/8b107ad5-e48a-40e5-bc5b-7b4bee391b32.png"
    },
    {
      "original_image": "https://img.washingtonpost.com/newWK-diner0718071405452672.jpg",
      "score": 26.429606594869853,
      "social_image": "data://.algo/opencv/SmartThumbnail/95a3b754-ccff-4aa7-b1be-3571bfcf8d5b.png"
    },
    {
      "original_image": "https://img.washingtonpost.com/FDsmartfoodfeb01-6_1326560940.jpg",
      "score": 25.39022464287755,
      "social_image": "data://.algo/opencv/SmartThumbnail/temp/a5af2c8e-7b81-434f-955c-762075f5f5e4.png"
    }
  ]
}
</code></pre>
        <a href="https://algorithmia.com/algorithms/web/SocialMediaImageRecommender" class="btn btn-primary-inverse">
          LEARN MORE
        </a>
      </div>
    </div>
  </section>

  <!-- JS -->
  <script src="<%= slug %>/public/js/TweenMax.min.js"></script>
  <script src="<%= slug %>/public/js/dots.js"></script>
  <script src="<%= slug %>/public/js/dropzone.js"></script>

  <%= footer %>