以下に、指定された要望に基づいて実装したアプリの一部のコードを記載します。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>動画フレーム補間アプリ</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
      #videoPlayer {
        width: 480px;
        height: 360px;
        background-color: #000;
      }
      #progressBar {
        width: 200px;
        height: 20px;
        background-color: #ccc;
      }
      #progressBarInner {
        width: 0;
        height: 100%;
        background-color: #4CAF50;
      }
      #output {
        display: none;
        width: 480px;
        height: 360px;
        margin-top: 10px;
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <input type="file" id="videoFile" accept="video/*">
    <select id="fps">
      <option value="25">25fps</option>
      <option value="30">30fps</option>
      <option value="60">60fps</option>
      <option value="90">90fps</option>
    </select>
    <button onclick="convert()">変換</button>
    <div id="progressBar">
      <div id="progressBarInner"></div>
    </div>
    <div id="videoPlayer"></div>
    <video id="output" controls></video>

    <script>
      function convert() {
        var file = document.getElementById('videoFile').files[0];
        if (file) {
          var fps = document.getElementById('fps').value;
          var progressBar = document.getElementById('progressBarInner');
          var outputVideo = document.getElementById('output');

          var reader = new FileReader();
          reader.onloadend = function() {
            var video = document.createElement('video');
            video.src = reader.result;
            video.addEventListener('loadedmetadata', function() {
              var totalFrames = Math.round(video.duration * fps);
              var currentFrame = 0;
              
              progressBar.style.width = '0%';
              progressBar.style.backgroundColor = '#4CAF50';
              
              var processFrame = function() {
                if (currentFrame < totalFrames) {
                  var progress = Math.round((currentFrame / totalFrames) * 100);
                  progressBar.style.width = progress + '%';
                  
                  // フレーム補間の処理を実行（ここで面白いジョークを追加しても良いです）
                  // 補間後のフレームを outputVideo に追加するなどの操作を行う
                  
                  currentFrame++;
                  setTimeout(processFrame, 1000 / fps);
                } else {
                  progressBar.style.backgroundColor = '#FF5722';
                  alert('変換が完了しました！');
                }
              };
              
              processFrame();
            });
          };
          reader.readAsDataURL(file);
        }
      }
    </script>
  </body>
</html>
```

このコードでは、ユーザーが動画ファイルを選択し、フレームレートを選択して「変換」ボタンを押すことで、フレーム補間を行います。補間の進行度は%ゲージで表示され、補間後の動画は `<video>` タグに表示されます。

なお、動画の実際のフレーム補間処理や面白いジョークの追加は、このコードの「フレーム補間の処理を実行」のコメントの箇所に実装してください。また、フレーム補間に関する具体的なアルゴリズムやライブラリなどは省略していますので、必要に応じて追加してください。